8 min read
2026-02-06
CSS Grid Layout is a powerful layout system that allows you to create 2D grids. Unlike Flexbox, Grid works on two axes simultaneously.
Grid container — element with `display: grid`
Grid elements — child elements of the container
Grid lines — grid dividing lines
Grid cells — intersection of row and column
Grid areas — named groups of cells
| Property | Description |
|---|---|
| grid-template-columns | Defines columns |
| grid-template-rows | Defines strings |
| grid-template-areas | Named Areas |
| gap | Spaces between cells |
| justify-items | Horizontal alignment |
| align-items | Vertical alignment |
The `fr` unit allocates free space proportionally. `1fr 2fr` creates two columns, where the second one is twice as wide.
`repeat(3, 1fr)` - three equal columns
`minmax(200px, 1fr)` - from 200px to available space
`repeat(auto-fill, minmax(250px, 1fr))` - adaptive grid
Visually design Grid layouts and export finished CSS code.
See also: Flexbox Playground, CSS Minifier, Color Picker