Two-dimensional layout with CSS Grid
| Command | Description |
|---|---|
display: grid | Enable grid layout |
grid-template-columns | Define column tracks |
grid-template-rows | Define row tracks |
grid-template-areas | Named grid areas |
gap: 20px | Space between cells |
row-gap / column-gap | Separate row/column gaps |
| Command | Description |
|---|---|
100px | Fixed size |
1fr | Fractional unit (flexible) |
auto | Content-based size |
minmax(100px, 1fr) | Min and max size |
repeat(3, 1fr) | Repeat pattern |
repeat(auto-fill, minmax(200px, 1fr)) | Responsive grid |
repeat(auto-fit, minmax(200px, 1fr)) | Collapse empty tracks |
| Command | Description |
|---|---|
grid-column: 1 / 3 | Span columns 1-2 |
grid-row: 1 / 3 | Span rows 1-2 |
grid-column: span 2 | Span 2 columns |
grid-area: header | Place in named area |
| Command | Description |
|---|---|
justify-items: center | Align items horizontally |
align-items: center | Align items vertically |
place-items: center | Both in one (align justify) |
justify-content: center | Align grid in container (horizontal) |
align-content: center | Align grid in container (vertical) |