CSS Grid Blog Post Layout Generator
A readable measure in the middle, a sticky table of contents beside it, full-bleed figures that break the container.
1180px
1220px2minmax(0, 68ch)31fr4
1auto2auto3auto4
title1 / 2 / 2 / 3
body2 / 2 / 3 / 3
figure3 / 1 / 4 / 4
toc2 / 1 / 3 / 2
Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.
.post {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
gap: 24px;
grid-template-areas:
"title"
"body"
"figure";
}
.post > .title { grid-area: title; }
.post > .body { grid-area: body; }
.post > .figure { grid-area: figure; }
.post > .toc { display: none; }
@media (min-width: 1000px) {
.post {
grid-template-columns: 220px minmax(0, 68ch) 1fr;
gap: 40px;
grid-template-areas:
". title ."
"toc body ."
"figure figure figure";
}
.post > .toc { grid-area: toc; }
}
How this layout works
The trick here is the three-column track list: a gutter, a content column capped at a readable measure, and a gutter. Figures span all three to go full-bleed while body text stays at 65 characters.
The contents column uses position: sticky — grid does not provide stickiness itself, but a grid item is a perfectly good sticky containing block.
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 a full-bleed image inside a centred article?
Use three columns — gutter, content, gutter — with the content column capped at a readable measure like
minmax(0, 68ch). Body text sits in the middle; a figure that should break out spans all three.Can a grid item be position: sticky?
Yes. Grid does not provide stickiness itself, but a grid item is a valid containing block for
position: sticky — which is how a table of contents stays put beside a scrolling article.How do I center a grid in CSS?
Use
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?
Set
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?
Use
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?
Use Grid when things must line up in two directions at once, and Flexbox when content flows along one axis. A page skeleton or dashboard is Grid; a navbar or row of buttons is Flexbox. They nest: Grid for the page, Flexbox inside the cells.