Build the feature grid

Let’s put the Grid module to work on the three feature cards of the course page. The goal is a grid that goes from three columns to one as the window shrinks, without a single media query.

We use the auto-fit pattern from the tracks lesson, plus a bit of padding and a border so we can see each card:

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

.card {
  padding: 1.5rem;
  border: 1px solid currentColor;
}

Reload the page. The three cards sit in a row on a wide window. Drag the window narrower and at some point the third card drops to a second row, then the second card follows. That point is wherever a column would have to go below 16rem, not a device width you picked.

Why Grid and not flex-wrap

Now the interesting comparison. Change one card’s text to a long paragraph and leave the others short. With Grid, all three cards stay the same height and the same width, because they share row and column tracks.

Try the same thing with Flexbox for a minute:

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 16rem;
}

It looks similar until the cards wrap. Now the last card alone on its line stretches to the full width, and the cards on different lines have different widths. Flexbox sizes each line on its own. Grid keeps the columns.

Switch back to the Grid version. This is why I use Grid for cards and Flexbox for toolbars.

Test with real content

A card grid that only ever holds “Lorem ipsum” hides problems. Before you move on:

• give one card a heading twice as long as the others
• put a long URL in one card and watch what happens to the column and the text
• add a fourth and a fifth card and watch the implicit rows
• zoom to 200%

The URL test is the one that catches people. The long string either stretches its column or spills out of the card. Both are wrong. Add overflow-wrap: anywhere to .card so long strings break like normal text, and if a column still grows, go back to the tracks lesson and remember the hidden auto minimum in 1fr.

No breakpoint needed

Notice we didn’t write a media query. The track definition already responds to the available space. This is what people mean by intrinsic layout: the component adapts by itself, wherever you drop it. We’ll add a media query later in the course, but only where the content needs a deliberate change, like the hero section.

When the grid survives the long heading, the URL, and the extra cards, take the quiz below to check the Grid concepts from this module.

Quick check

Start quiz

Result

You got of right.

Try again