CSS Grid Centered Hero Section Generator
Eyebrow, headline, subhead and buttons centred in a measured column, with the section full width.
Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.
.hero {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
gap: 16px;
grid-template-areas:
"eyebrow"
"headline"
"subhead"
"actions";
}
.hero > .eyebrow { grid-area: eyebrow; }
.hero > .headline { grid-area: headline; }
.hero > .subhead { grid-area: subhead; }
.hero > .actions { grid-area: actions; }
@media (min-width: 820px) {
.hero {
grid-template-columns: 1fr min(720px, 100%) 1fr;
gap: 20px;
grid-template-areas:
". eyebrow ."
". headline ."
". subhead ."
". actions .";
}
}
How this layout works
A centred hero is one column of min(720px, 100%) inside a 1fr … 1fr page grid. The section background spans the whole window, the text does not — and no wrapper div is needed to do it.
Cap the headline separately from the paragraph. A headline reads well at around 20 words per line-length, body copy at 65 characters; giving both the same max-width makes one of them wrong.
The button row is its own grid area so it can go side-by-side on desktop and stacked full-width on mobile, which is where tap-target size actually matters.
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 centre a hero section with CSS Grid?
1fr min(720px, 100%) 1fr — and place the content in the middle track. The section background still spans the window, and no wrapper div is needed to centre the text.Should the headline and the paragraph share a max width?
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 centered hero section 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.