📖 Guide
CSS Grid Reference
Complete CSS Grid reference — container properties, item placement, grid functions, and common layout patterns.
88 commands across 11 categories
Container: DisplayContainer: Template Columns & RowsContainer: Template AreasContainer: GapContainer: Justify & Align ItemsContainer: Justify & Align ContentItem: Column & Row PlacementItem: Grid AreaItem: Justify & Align SelfGrid FunctionsCommon Layouts
Container: Display
| Command | Description |
|---|---|
display: grid | Create a block-level grid container |
display: inline-grid | Create an inline-level grid container |
Container: Template Columns & Rows
| Command | Description |
|---|---|
grid-template-columns: 200px 1fr 200px | Three columns: fixed, flexible, fixed |
grid-template-columns: 1fr 1fr 1fr | Three equal-width columns |
grid-template-columns: repeat(3, 1fr) | Three equal columns using repeat() |
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) | Responsive grid — as many 250px+ columns as fit |
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) | Like auto-fill but stretches items to fill remaining space |
grid-template-columns: minmax(200px, 300px) 1fr | First column between 200–300px, second takes rest |
grid-template-columns: fit-content(300px) 1fr | First column shrinks to content up to 300px max |
grid-template-columns: [start] 1fr [mid] 2fr [end] | Named grid lines |
grid-template-rows: 60px 1fr 40px | Three rows: header, flexible main, footer |
grid-template-rows: auto 1fr auto | Rows sized by content with flexible middle |
grid-template-rows: repeat(3, minmax(100px, auto)) | Three rows, minimum 100px, grow with content |
grid-auto-rows: minmax(100px, auto) | Set size for implicitly created rows |
grid-auto-columns: 200px | Set size for implicitly created columns |
grid-auto-flow: row | Place items by filling rows first (default) |
grid-auto-flow: column | Place items by filling columns first |
grid-auto-flow: dense | Fill gaps by rearranging items (may change visual order) |
Container: Template Areas
| Command | Description |
|---|---|
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer" | Define named grid areas — each string is a row |
grid-template-areas:
"nav nav"
". content"
"footer footer" | Use . for empty cells |
grid-template:
"header header" 60px
"sidebar main" 1fr
"footer footer" 40px
/ 200px 1fr | Shorthand: areas, row sizes, and column sizes together |
Container: Gap
| Command | Description |
|---|---|
gap: 16px | Equal row and column gap |
gap: 16px 24px | Row gap 16px, column gap 24px |
row-gap: 16px | Gap between rows only |
column-gap: 24px | Gap between columns only |
gap: 1rem | Gap using relative units |
Container: Justify & Align Items
| Command | Description |
|---|---|
justify-items: stretch | Stretch items to fill their cell width (default) |
justify-items: start | Align items to the start of their cell (inline axis) |
justify-items: end | Align items to the end of their cell |
justify-items: center | Center items horizontally in their cell |
align-items: stretch | Stretch items to fill their cell height (default) |
align-items: start | Align items to the top of their cell |
align-items: end | Align items to the bottom of their cell |
align-items: center | Center items vertically in their cell |
place-items: center | Shorthand: center both horizontally and vertically |
place-items: start end | Shorthand: align-items start, justify-items end |
Container: Justify & Align Content
| Command | Description |
|---|---|
justify-content: start | Pack grid at the start of the inline axis |
justify-content: end | Pack grid at the end of the inline axis |
justify-content: center | Center grid horizontally in container |
justify-content: space-between | Equal space between columns, none at edges |
justify-content: space-around | Equal space around columns |
justify-content: space-evenly | Equal space between and around columns |
align-content: start | Pack grid at the top of container |
align-content: end | Pack grid at the bottom of container |
align-content: center | Center grid vertically in container |
align-content: space-between | Equal space between rows |
place-content: center | Shorthand: center grid both ways |
Item: Column & Row Placement
| Command | Description |
|---|---|
grid-column: 1 / 3 | Span from column line 1 to line 3 (2 columns) |
grid-column: 1 / -1 | Span all columns (start to end) |
grid-column: span 2 | Span 2 columns from auto-placed position |
grid-column-start: 2 | Start at column line 2 |
grid-column-end: 4 | End at column line 4 |
grid-row: 1 / 3 | Span from row line 1 to line 3 (2 rows) |
grid-row: 1 / -1 | Span all rows |
grid-row: span 3 | Span 3 rows |
grid-row-start: 2 | Start at row line 2 |
grid-row-end: 5 | End at row line 5 |
Item: Grid Area
| Command | Description |
|---|---|
grid-area: header | Place item in the named area 'header' |
grid-area: sidebar | Place item in the named area 'sidebar' |
grid-area: 1 / 1 / 3 / 3 | Shorthand: row-start / col-start / row-end / col-end |
grid-area: span 2 / span 3 | Span 2 rows and 3 columns |
Item: Justify & Align Self
| Command | Description |
|---|---|
justify-self: start | Align this item to cell start (inline axis) |
justify-self: end | Align this item to cell end |
justify-self: center | Center this item horizontally in its cell |
justify-self: stretch | Stretch this item to fill cell width |
align-self: start | Align this item to cell top |
align-self: end | Align this item to cell bottom |
align-self: center | Center this item vertically in its cell |
align-self: stretch | Stretch this item to fill cell height |
place-self: center | Shorthand: center both ways |
place-self: end start | Shorthand: align-self end, justify-self start |
Grid Functions
| Command | Description |
|---|---|
repeat(3, 1fr) | Repeat a track pattern 3 times |
repeat(auto-fill, 200px) | Fill container with as many 200px tracks as fit |
repeat(auto-fit, minmax(200px, 1fr)) | Auto-fit: like auto-fill but collapses empty tracks |
repeat(2, 1fr 2fr) | Repeat a pattern: 1fr 2fr 1fr 2fr |
minmax(100px, 1fr) | Track at least 100px, grows to fill space |
minmax(auto, 300px) | Track sized by content up to 300px max |
minmax(0, 1fr) | Flexible track that can shrink to 0 |
1fr | Fractional unit — share of remaining space |
fit-content(300px) | Size by content, up to 300px maximum |
Common Layouts
| Command | Description |
|---|---|
display: grid; place-items: center; min-height: 100vh | Center anything on the page |
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem | Responsive card grid — no media queries needed |
display: grid;
grid-template: "header" auto "main" 1fr "footer" auto / 1fr;
min-height: 100vh | Holy grail: header, stretchy main, footer |
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer" | Classic sidebar layout with named areas |
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem | 12-column grid system (like Bootstrap) |
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-rows: 1fr;
gap: 1rem | Image gallery with equal-height cells |
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-auto-flow: dense | Masonry-like layout with dense packing |
display: grid;
grid-template-columns: 1fr min(65ch, 100%) 1fr;
/* children */ grid-column: 2 | Content with max-width centered (no margin: auto needed) |
📖 Free, searchable command reference. Bookmark this page for quick access.