Quick answer: CSS Grid lays out items in rows and columns at the same time. Define tracks with grid-template-columns, place items with grid-column and grid-row, and space them with gap. The repeat(auto-fit, minmax(...)) pattern builds a fully responsive card grid in one line, and subgrid aligns nested content to the parent’s tracks.

Defining tracks in CSS grid

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;   /* sidebar + flexible main */
  grid-template-rows: auto 1fr auto;  /* header + content + footer */
  gap: 1rem;
  min-height: 100svh;
}

The fr unit is the key idea: it distributes the leftover space after fixed tracks and gaps are subtracted. 1fr 2fr gives a third to the first column and two thirds to the second. Mixed with fixed sizes, it expresses almost any two-dimensional layout.

The responsive CSS grid card layout in one line

This is the pattern worth memorising. It produces as many equal columns as fit, with no media queries at all.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
  • minmax(260px, 1fr) — each column is at least 260px and at most an equal share.
  • auto-fit — fit as many columns as possible into the width, stretching them to fill the row.
  • auto-fill — same, but keeps empty tracks, which keeps column widths stable.

Use auto-fit when you want a few cards to stretch across the row, and auto-fill when you want the columns to keep their size even with few items. Both remove the need for breakpoint-specific column counts.

Placing items

Grid lines are numbered from 1. You can address cells by line number, by span, or by named areas.

/* line numbers */
.featured { grid-column: 1 / 3; grid-row: 1 / 2; }
/* span shorthand */
.wide { grid-column: span 2; }

/* named areas — the layout is readable at a glance */
.layout {
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
}
.layout > header { grid-area: head; }
.layout > aside  { grid-area: side; }
.layout > main   { grid-area: main; }
.layout > footer { grid-area: foot; }

The named-areas approach is worth using on page-level layout, because the grid-template-areas block draws the page in miniature. Reordering for mobile is then a matter of rewriting those three quoted lines.

Aligning a single item

Grid has both a container-level and an item-level alignment. Container justify-items and align-items affect all children; the same properties used on an item affect only that one.

.cards { place-items: stretch; }        /* fill the cell */
.badge { justify-self: end; align-self: start; }

For the common case of one card in the whole grid that needs a different corner placement, justify-self and align-self on that item are clearer than adding another wrapper.

Subgrid for aligned nesting

When a nested element should line up with its parent’s tracks, subgrid does exactly that instead of inventing its own.

.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }

A card that spans three rows of the parent grid can share those row lines, so titles, images and buttons line up across every card regardless of text length. Subgrid became widely available in 2026 and is now a reasonable default for card layouts that need cross-card alignment.

Next: responsive design and container queries. To learn Grid and Flexbox on real designs, Ampersand Academy teaches web development one-to-one.

Frequently asked questions

What does the fr unit do in CSS Grid?

fr distributes the free space after fixed tracks and gaps. For example 1fr 2fr gives the first column one third and the second two thirds of the remaining width.

How do I make a responsive card grid without media queries?

Use repeat(auto-fit, minmax(260px, 1fr)) on grid-template-columns. It fits as many equal columns as the width allows and stretches them to fill the row.

What is the difference between auto-fit and auto-fill?

Both fit as many tracks as possible. auto-fit collapses empty tracks so items stretch, while auto-fill keeps them, so column widths stay stable with few items.

What is subgrid in CSS?

Subgrid lets a nested grid use its parent’s track lines for alignment, so content inside a card lines up with content in the cards beside it.

Should I use Grid or Flexbox for a card row?

Use Grid when you want equal columns and rows that align precisely, and Flexbox when items should size to their content and wrap naturally on one axis.

Last updated on · Written by

Leave A Comment

Keep reading