Mobile-first means writing your base styles for the smallest screen, then adding complexity for larger screens with min-width media queries — rather than starting at desktop and stripping things away.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Why mobile-first wins: base CSS stays minimal (mobile gets only what it needs — good for performance on weaker devices), and you layer on complexity, which is easier to reason about than overriding/removing it. It also matches how content naturally reflows from one column to many.
Media queries respond to the viewport — the whole window. But a reusable component (say a card) might appear in a wide main area or a narrow sidebar on the same page. Viewport width can't tell you how much room the component actually has.
.card-wrapper {
container-type: inline-size; /* declare it a query container */
}
/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: auto 1fr; }
}
Now the same card automatically switches to a horizontal layout whenever its container is ≥400px — whether that's because the screen is big or because it's in a wide column. The component becomes truly context-independent and reusable.
Mobile-first keeps responsive CSS lean and maintainable.
Container queries are a major advance: they let components respond to their own available space, which is exactly what you need in a component-based architecture (design systems, reusable cards/widgets) where the same component lands in many contexts.