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