Responsive CSS Grid Card Layout Generator
Equal-width cards that reflow from one column to four without a single media query — or with them, if you want control.
Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.
.card-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
gap: 16px;
grid-template-areas:
"card1"
"card2"
"card3"
"card4";
}
.card-grid > .card1 { grid-area: card1; }
.card-grid > .card2 { grid-area: card2; }
.card-grid > .card3 { grid-area: card3; }
.card-grid > .card4 { grid-area: card4; }
@media (min-width: 640px) {
.card-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 20px;
grid-template-areas:
"card1 card2"
"card3 card4";
}
}
@media (min-width: 1024px) {
.card-grid {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 24px;
grid-template-areas:
"card1 card2 card3 card4";
}
}
How this layout works
For a plain card grid you often do not need breakpoints at all: repeat(auto-fill, minmax(260px, 1fr)) reflows on its own. Set the column track to that and the media queries below become optional.
Reach for explicit breakpoints when the card count matters — when you want exactly three across on desktop rather than however many happen to fit.
The row track is auto, so every row is as tall as its tallest card. Add align-items: start if you would rather cards keep their natural height.
Every property used here is listed in the CSS Grid cheat sheet, with the reason to reach for it.
Frequently asked questions
How do I make cards the same height in a grid?
align-items: start if you want each card to keep its natural height instead.What is the difference between auto-fill and auto-fit?
auto-fill keeps empty tracks in the grid when there are not enough items; auto-fit collapses them so the existing items stretch to fill the row. Use auto-fit when a half-empty last row should spread out.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.