CSS Grid Feature Section Generator
A section heading over a grid of feature cards that reflows from one column to three.
Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.
.features {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
gap: 20px;
grid-template-areas:
"heading"
"feature-1"
"feature-2"
"feature-3";
}
.features > .heading { grid-area: heading; }
.features > .feature-1 { grid-area: feature-1; }
.features > .feature-2 { grid-area: feature-2; }
.features > .feature-3 { grid-area: feature-3; }
@media (min-width: 860px) {
.features {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 28px;
grid-template-areas:
"heading heading heading"
"feature-1 feature-2 feature-3";
}
}
How this layout works
Feature sections almost always want auto-fit rather than fixed column counts: repeat(auto-fit, minmax(240px, 1fr)) gives three cards on a laptop, two on a tablet and one on a phone from a single declaration.
The difference between auto-fit and auto-fill shows up when there are fewer cards than columns. auto-fit collapses the empty tracks so the remaining cards stretch; auto-fill keeps them, leaving a gap where a fourth card would be. For a marketing row you almost always want auto-fit.
Equal-height cards come free — grid items stretch to their row by default. If a card has a button that must sit at the bottom regardless of copy length, make the card itself a grid with an auto 1fr auto row list.
Every property used here is listed in the CSS Grid cheat sheet, with the reason to reach for it.
Frequently asked questions
What is the difference between auto-fit and auto-fill?
auto-fit collapses the empty tracks so the remaining cards stretch to fill the row; auto-fill keeps them, leaving a hole where another card would go. Marketing rows usually want auto-fit.How do I make feature cards the same height?
grid-template-rows: auto 1fr auto.How do I center a grid in CSS?
justify-content: center on the grid container to centre the whole grid inside it, and margin-inline: auto with a max-width to centre the container in the page. These are different jobs: the first moves the tracks within the container, the second moves the container itself.How do I center items inside a CSS grid?
place-items: center on the container. That is shorthand for align-items plus justify-items, and it centres every item inside its own cell on both axes. For a single item, use place-self: center on that item instead.How do I make a CSS grid responsive?
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) and it reflows at every width with no media queries at all. Add breakpoints only when the exact column count matters, or when the layout has to change shape rather than just wrap.When should I use CSS Grid instead of Flexbox?
How to use it
-
Open the pattern
The feature grid loads into the editor already responsive, with every breakpoint set up.
-
Change the tracks
Edit the column and row sizes in the Tracks panel. Anything valid in a track list works.
-
Redraw at another width
Move the ruler past a breakpoint marker and rearrange. Only the placement changes.
-
Copy the code
Take CSS, HTML, Tailwind or a shadcn component. The media queries are already written.
More in Marketing sections
- Split Screen Hero
- Pricing Table
- Footer Columns
- Centered Hero Section
- Testimonial Grid
- Logo Wall
- Stats Band