CSS Grid
Grid layout (2D layout system)
Section titled “Grid layout (2D layout system)”display: grid transforms all direct children into cells of a two-dimensional grid.
.container { display: grid;}Grid Template Columns & Rows
Section titled “Grid Template Columns & Rows”Define column and row tracks, often using functions like repeat() or minmax().
Auto-placement & Gap
Section titled “Auto-placement & Gap”grid-auto-flow, grid-auto-columns/rows, and gap handle automatic item placement and spacing.
Explicit placement: grid-column / grid-row / grid-area
Section titled “Explicit placement: grid-column / grid-row / grid-area”Exact positioning of elements in the grid using line numbers or named areas.
Alignment & Align-Self
Section titled “Alignment & Align-Self”Alignment rules in Grid come from the Flexbox module, now shared (box‑alignment).
Responsive layout with Grid
Section titled “Responsive layout with Grid”Advanced examples: fluid layout from 1 to 3 columns, 12‑column system, product auto-placement.
Quick summary
Section titled “Quick summary”| Concept | Short description |
|---|---|
display: grid | Activates the two-dimensional grid for direct children |
grid-template | Explicitly defines columns, rows, or areas with repeat() / minmax() |
| Auto-placement | Automatically places items using grid-auto-flow and gap |
| Explicit placement | grid-column, grid-row, grid-area: precise control of the grid layout |
| Alignment | align-items, justify-items, align-self shared with the Flexbox model |
| Responsive/grid layout | Adaptive grids, multi-column systems, named areas |