A grid container is a parent element that surrounds child elements. Once Grid is switched on, those children become grid items, ready to be arranged across rows and columns instead of simply stacking in the browser’s default flow. section 13.1 section 13.2
The magic-switch-looking declaration is display: grid. Apply it to a block-level parent such as a div or even the body element. Nothing extra is needed on each child—Grid quietly promotes them all to grid items. section 13.2 section 13.1
.container {
display: grid; #1
}
This small rule turns the element with class container into a grid container. Its child divs become grid items automatically. section 13.2
At first, a new grid container can look as though nothing changed: its items form a one-column grid that resembles ordinary stacking. Specify rows or columns to make the grid’s structure visible. section 13.2 section 13.10
A grid container controls the larger layout picture with properties such as:
- grid-template-columns and grid-template-rows to set track counts and sizes. section 13.10
- column-gap and row-gap to add gutters between tracks. section 13.10
- justify-content and align-content to position items within the whole grid. section 13.9
- justify-items and align-items to position items within their columns or rows. section 13.10
Centering a page’s main content
Make body a three-column grid with 1fr auto 1fr. The outer columns share leftover space, while the middle column fits its content; placing a nested container in column 2 centers that content in the browser window. section 20.5
