Modern CSS Layout: Flexbox, Grid, and Container Queries

Layout used to be a fight. It is not anymore.

For a decade, CSS layout meant floats, clearfix hacks, and a wall of @media queries tuned to whatever phone was popular that year. In 2026 that is over. Flexbox and Grid are universal, intrinsic sizing keywords let the content decide its own size, and container queries finally let a component respond to *its own* width instead of the browser window. You can build a responsive card grid with zero media queries, and it will be more robust than the old way.

The shift in mindset: stop telling the browser exact pixel positions. Describe *relationships*, these grow to fill the row, wrap into as many columns as fit, never get narrower than 16rem, and let the layout engine do the math.

Two tools, one mental model each

Almost every layout question reduces to one decision: am I arranging things along one axis or placing them in two axes at once? That single question picks your tool.

Flexbox lays content out along a line. Grid lays content out into a plane. Reach for the simplest one that fits.

Flexbox in practice: a navbar that just works

A navigation bar is the textbook Flexbox case: a single row where the logo sits left, links sit in the middle, and an action button hugs the right. gap handles spacing, margin-inline-start: auto pushes the trailing item away, no floats, no absolute positioning.

<nav class="nav">
  <a class="brand" href="/">Cloud<span>Learn</span></a>
  <ul class="nav-links">
    <li><a href="/blog">Blog</a></li>
    <li><a href="/labs">Labs</a></li>
    <li><a href="/paths">Paths</a></li>
  </ul>
  <a class="cta" href="/signup">Sign up</a>
</nav>

.nav {
  display: flex;
  align-items: center;   /* vertical centering on the cross axis */
  gap: 1.5rem;           /* spacing between every child, no margins */
}

.nav-links {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* push the CTA to the far end of the row */
.cta { margin-inline-start: auto; }

Three things do the heavy lifting: display: flex makes children sit on one line, align-items: center centers them vertically without a single px of guesswork, and margin-inline-start: auto eats all the free space before the button. Resize the window and it stays correct, Flexbox recomputes the free space on every frame.

Grid in practice: a gallery with no media queries

Here is the trick that retires most of your breakpoints. repeat(auto-fit, minmax(16rem, 1fr)) tells the browser to make as many equal columns as fit, where each is at least 16rem wide and shares the leftover space equally. On a phone that is one column; on a laptop it might be four, and you wrote one line.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}

Unpack minmax(16rem, 1fr): the min (16rem) is the smallest a column may shrink to before the browser drops to fewer columns; the max (1fr) means each column takes an equal share of the remaining space. auto-fit collapses empty tracks so the items that exist stretch to fill the row.

Stop hard-coding sizes: intrinsic sizing and clamp()

Fixed sizes (width: 320px, height: 200px) are the root of most layout bugs, they break the moment content is longer or the screen is smaller than you guessed. Intrinsic keywords let the *content* set the size, and clamp() lets a value flex between a floor and a ceiling.

Fluid type without breakpoints

clamp(MIN, PREFERRED, MAX) is the single most useful function for responsive type. The preferred value usually mixes a rem base with a viewport unit so it scales smoothly, while the min and max stop it getting unreadable on tiny phones or comically large on 4K monitors.

:root {
  /* never below 1rem, scales with viewport, never above 1.25rem */
  --step-0: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}

body { font-size: var(--step-0); }
h1   { font-size: var(--step-2); line-height: 1.1; }

/* a card that grows with content but never blows past the column */
.card { inline-size: fit-content; max-inline-size: 100%; }

Container queries: components that respond to their own space

Media queries ask how wide is the *window*, but a card does not care about the window. It cares how much room *it* has. The same card might be full-width in a sidebar-less article and cramped in a three-column dashboard. Container queries finally answer the right question: how wide is my *container*?

Media queries are global. Container queries are local. Truly reusable components measure their container, not the viewport.

You opt an element in as a *containment context* with container-type, then query it with @container. Below, a card lays out vertically by default and switches to a horizontal layout only once its own width passes 28rem, wherever it happens to live.

/* 1. mark the element whose size children will query */
.card-wrap {
  container-type: inline-size;
  container-name: card;
}

/* 2. default (narrow) layout: stacked */
.card {
  display: grid;
  gap: 1rem;
}

/* 3. when the CONTAINER is wide enough, go side-by-side */
@container card (min-width: 28rem) {
  .card {
    grid-template-columns: 8rem 1fr;
    align-items: center;
  }
}

Drop that card into the auto-fit gallery from earlier and something delightful happens: when the grid shows one wide column, each card goes horizontal; when it packs four narrow columns, each card stacks. One component, zero viewport breakpoints, correct in every slot.

A real responsive card layout, end to end

Here is the full thing: an auto-fit Grid of cards, each card a container that flips between stacked and horizontal based on its own width, with fluid type via clamp(). No @media query anywhere.

<ul class="gallery">
  <li class="card-wrap">
    <article class="card">
      <img class="card-img" src="/k8s.png" alt="" />
      <div class="card-body">
        <h3>Kubernetes Basics</h3>
        <p>Pods, services, and your first deployment.</p>
      </div>
    </article>
  </li>
  <!-- repeat .card-wrap for each item -->
</ul>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.card-wrap { container-type: inline-size; }

.card {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(240 6% 90%);
}

.card-img {
  inline-size: 100%;
  block-size: auto;
  border-radius: 0.5rem;
}

.card h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); margin: 0; }

/* card goes horizontal once IT (not the window) is wide enough */
@container (min-width: 26rem) {
  .card { grid-template-columns: 7rem 1fr; align-items: center; }
  .card-img { block-size: 100%; object-fit: cover; }
}

1. 1

   Grid makes the columns

   auto-fit + minmax decide how many cards fit per row at any width.

2. 2

   Each card is a container

   container-type: inline-size lets the card measure its own width.

3. 3

   The card reflows itself

   @container flips stacked to horizontal based on the card width, not the page.

4. 4

   Type stays fluid

   clamp() scales the heading smoothly between a readable floor and ceiling.

Modern selectors: :has, :is, :where

Layout is half the story; selecting the right elements without bloated CSS is the other half. Three selectors changed the game. :has() is the long-awaited *parent* selector, style an element based on what it contains. :is() and :where() collapse repetitive selector lists.

/* style the CARD when it contains an image, the parent selector */
.card:has(img) { padding-block-start: 0; }

/* highlight a form field whose input is invalid */
.field:has(input:invalid) { border-color: hsl(0 70% 50%); }

/* :is() groups selectors AND takes the highest specificity inside */
:is(h1, h2, h3) a { color: inherit; }

/* :where() is identical BUT contributes ZERO specificity */
:where(.prose a) { text-decoration: underline; }

Logical properties: layout that flips for any language

You may have noticed margin-inline-start and inline-size above instead of margin-left and width. Those are logical properties, they describe direction relative to the *text flow*, not the physical screen. In a left-to-right language inline-start is the left; in Arabic or Hebrew (right-to-left) it automatically becomes the right.

Subgrid: when nested items must line up with the parent

One last sharp tool. In the card gallery, suppose every card has an image, a title, and a footer button, and you want the titles across *all* cards to line up on the same baseline even when descriptions differ in length. A normal nested grid cannot see the parent tracks. subgrid can: the child adopts the parent grid lines.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  /* shared rows: image / title / text / footer */
  grid-template-rows: auto auto 1fr auto;
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-row: span 4;
  /* inherit the parent's row lines so every card aligns */
  grid-template-rows: subgrid;
}

Now the four rows are defined once on the gallery, and each card maps its image, title, body, and footer onto those shared lines. Footers align across cards regardless of how much text each one holds, a job that used to require fixed heights or JavaScript.

Common mistakes that cost hours

1. Fixed heights on content boxes. height: 200px overflows the instant text is longer. Use min-height or let content size the box.
2. Magic numbers for spacing. margin-top: 37px to nudge alignment is a smell, use gap, align-items, or margin-inline: auto so the engine computes it.
3. Media-query soup. Five breakpoints to fix one component means you needed auto-fit/minmax or a container query, not more breakpoints.
4. Reaching for Grid to lay out one line. A button row is Flexbox. Grid there is overkill and harder to read.
5. Querying the viewport for component layout. A reusable card should use @container, not @media, otherwise it breaks the moment it moves to a narrower slot.
6. Physical properties in i18n apps. margin-left does not flip for RTL; margin-inline-start does.
7. Pure `vw` font sizes. They ignore user zoom; always clamp with a rem term for accessibility.

Takeaways and where to go next

Layout is a foundation, not the finish line. Solidify the basics first, then decide how you organize styles at scale, and make sure what you build is usable by everyone.

• Ground the fundamentals: CSS fundamentals: the box model and layout.
• Choose how to organize CSS at scale: styling strategies: CSS-in-JS, utility, and modules.
• Make every layout usable for everyone: web accessibility (a11y).