Grid

Build the feature grid

Turn the project features into a responsive card grid and compare the two-dimensional result with a wrapping Flexbox layout.

12 minute lesson

~~~

Style the project features as a responsive grid:

.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;
}

Add cards with short and long content. The shared tracks keep columns aligned in a way independently wrapped flex lines would not.

Resize slowly and watch tracks appear or disappear based on available space. This layout may not need a breakpoint because the component responds through its track definition.

Quick check

Result

You got of right.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →