Five patterns cover most pages.
Direct answer
The most useful CSS Grid layouts are the page layout with named areas, auto-fitting card grids, sidebar layouts, equal-height columns and centred content. Each takes only a few lines.
1. Page layout
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 240px 1fr;
min-height: 100vh;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
2. Responsive cards
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
3. Sidebar that stacks on mobile
.layout { display: grid; gap: 24px; }
@media (min-width: 800px) {
.layout { grid-template-columns: 1fr 300px; }
}
4. Centre anything
.center {
display: grid;
place-items: center;
min-height: 60vh;
}
5. Full-bleed within a column
.wrap { display: grid; grid-template-columns: 1fr min(65ch, 100%) 1fr; }
.wrap > * { grid-column: 2; }
.wrap > .full { grid-column: 1 / -1; }
Where Teyro fits
Teyro's Responsive Web Design with CSS course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Learn these five and you can build most layouts.
