The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Create a grid container | display: grid; | View examples |
| Define explicit columns | grid-template-columns: 16rem 1fr; | View examples |
| Repeat equal columns | grid-template-columns: repeat(3, 1fr); | View examples |
| Space grid tracks | gap: 1rem; | View examples |
| Create responsive columns | grid-template-columns:
repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); | View examples |
| Protect flexible tracks | grid-template-columns: minmax(0, 1fr) 20rem; | View examples |
| Size implicit rows | grid-auto-rows: minmax(8rem, auto); | View examples |
| Place by column lines | grid-column: 1 / 3; | View examples |
| Span multiple columns | grid-column: span 2; | View examples |
| Place by row lines | grid-row: 1 / -1; | View examples |
| Declare named areas | grid-template-areas:
'header header'
'sidebar main'
'footer footer'; | View examples |
| Assign an item to an area | grid-area: main; | View examples |
| Align items vertically | align-items: center; | View examples |
| Align items horizontally | justify-items: stretch; | View examples |
| Set both item alignments | place-items: center; | View examples |
| Inherit parent columns | grid-template-columns: subgrid; | View examples |
CSS Grid controls rows and columns together. Define the tracks the design requires, let auto-placement handle ordinary items, and reserve explicit placement for elements whose position carries layout meaning.
Step by step
Detailed examples
Define explicit tracks and gaps
Setting display to grid creates a one-column grid until tracks are defined. Use fixed sizes only where the design requires them, use fr units to distribute remaining space, and use gap instead of item margins for consistent gutters.
.layout {
display: grid;
grid-template-columns: 16rem 1fr;
gap: 1rem;
}.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}Build grids that adapt to available space
Combine auto-fit with minmax for card grids that add and remove columns automatically. The min(100%, size) pattern prevents a minimum track from overflowing very narrow containers, while minmax(0, 1fr) lets long content shrink inside a flexible track.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
grid-auto-rows: minmax(8rem, auto);
gap: 1rem;
}.workspace {
display: grid;
grid-template-columns: minmax(0, 1fr) 20rem;
gap: 1.5rem;
}
.workspace pre {
overflow: auto;
}Place exceptional items with grid lines
Grid lines number the boundaries between tracks. Explicit placement is useful for headers, featured items, and controlled spans, but ordinary collections are usually simpler when auto-placement determines their cells.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.card--featured {
grid-column: 1 / 3;
}
.card--wide {
grid-column: span 2;
}.sidebar {
grid-column: 1;
grid-row: 1 / -1;
}Describe page regions with named areas
Template areas make large layouts readable by naming rectangular regions. Every row must have the same number of cells, repeated names must form rectangles, and each placed item uses the matching grid-area name.
.page {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 1rem;
}
.page-header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main-content { grid-area: main; }
.page-footer { grid-area: footer; }Align grid items within their areas
Align-items controls the block axis and justify-items controls the inline axis. Place-items sets both in that order. Stretch is often useful for cards, while centering both axes is appropriate for compact icons or empty states.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
justify-items: stretch;
gap: 1rem;
}
.empty-state {
display: grid;
min-height: 12rem;
place-items: center;
}Align nested content with subgrid
Subgrid lets a nested grid use tracks defined by its parent, which is useful when card headings, bodies, and actions should align across rows. The nested item must span the parent tracks it intends to inherit.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
gap: 1rem;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}Note: Check the browser support requirements for subgrid when targeting older environments.
Local code tester
Experiment with CSS Grid
Change the track definitions, placement, and alignment, then update the sandboxed preview.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.