⌘K
We use cookies to improve your experience
We use essential cookies to make our site work. With your consent, we may also use non-essential cookies to improve user experience.
8 sections · 41 items
| Code / Syntax | Description |
|---|---|
display: grid | Create a grid container |
display: inline-grid | Create an inline grid container |
grid-template-columns: 200px 1fr 2fr | Three columns: fixed, 1 fraction, 2 fractions |
grid-template-columns: repeat(3, 1fr) | Three equal columns |
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) | Responsive columns (fill available space) |
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) | Responsive columns (stretch to fit) |
grid-template-rows: 100px auto 1fr | Define row sizes |
grid-auto-rows: minmax(100px, auto) | Implicit row size |
| Code / Syntax | Description |
|---|---|
gap: 16px | Equal row and column gap |
row-gap: 16px | Gap between rows |
column-gap: 24px | Gap between columns |
gap: 16px 24px | Row gap 16px, column gap 24px |
| Code / Syntax | Description |
|---|---|
grid-column: 1 / 3 | Span from column line 1 to 3 |
grid-column: 1 / -1 | Span all columns |
grid-column: span 2 | Span 2 columns from current position |
grid-row: 1 / 3 | Span from row line 1 to 3 |
grid-row: span 2 | Span 2 rows from current position |
grid-area: 1 / 1 / 3 / 3 | row-start / col-start / row-end / col-end |
| Code / Syntax | Description |
|---|---|
grid-template-areas: "header header" "sidebar main" "footer footer" | Define named grid areas |
grid-area: header | Place item in named area |
grid-template-areas: "... main" | Use ... for empty cells |
| Code / Syntax | Description |
|---|---|
justify-items: start | Align items to cell start (horizontal) |
justify-items: center | Center items in cell (horizontal) |
justify-items: end | Align items to cell end (horizontal) |
align-items: start | Align items to cell start (vertical) |
align-items: center | Center items in cell (vertical) |
place-items: center | Center both directions (shorthand) |
justify-content: center | Center grid in container (horizontal) |
align-content: center | Center grid in container (vertical) |
| Code / Syntax | Description |
|---|---|
justify-self: start | Align this item to cell start (horizontal) |
justify-self: center | Center this item in cell (horizontal) |
align-self: end | Align this item to cell end (vertical) |
place-self: center | Center this item both directions |
| Code / Syntax | Description |
|---|---|
grid-auto-flow: row | Fill rows first (default) |
grid-auto-flow: column | Fill columns first |
grid-auto-flow: dense | Fill gaps with smaller items |
grid-auto-columns: 1fr | Size for implicit columns |
| Code / Syntax | Description |
|---|---|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) | Responsive card grid |
grid-template-columns: 250px 1fr | Sidebar + content layout |
grid-template: "h h" auto "s m" 1fr "f f" auto / 250px 1fr | Full page layout with areas |
grid-template-columns: repeat(12, 1fr) | 12-column framework grid |