Build mobile-first with min-width

Start with one column and expand the layout only when space is available.

Official sourceW3C Media Queries — min-width rangeReviewed: 2026-08-26

STEP 1 · LEARN

How it works

In a mobile-first approach, the base rule serves the small screen. A min-width media query adds the more complex layout from the chosen threshold upward.

Correct example

.cards { display: grid; grid-template-columns: 1fr; } @media (min-width: 768px) { .cards { grid-template-columns: 1fr 1fr; } }

A phone receives one column, while tablet and desktop receive two.

Common mistake

.cards { grid-template-columns: 1fr 1fr; } @media (min-width: 768px) { .cards { grid-template-columns: 1fr; } }

This order starts with the wide version and narrows it on large screens, so it is not mobile-first.

STEP 2 · APPLY

Your exercise

Keep one column in the CSS base and define two columns from 768px.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The mobile-first base has one column.
From 768px there are two columns.
The target element is present in the page.

Explain the solution logic

The simple base reduces mobile overrides, while the enhancement is progressively enabled through min-width.

How it works

Your exercise

Write and see the result

What needs to pass