grid
The grid shorthand defines a grid container's rows, columns, and auto-flow in one declaration.
Syntax
grid: <template-rows> / <template-columns>;
Examples
.layout {
display: grid;
grid: auto 1fr auto / 240px 1fr;
min-height: 100dvh;
}
Output
Creates a header/content/footer by sidebar layout filling the viewport height.
Notes
The grid shorthand resets all grid sub-properties. For most cases prefer the explicit grid-template-columns/rows. Combine with grid-template-areas for readable named regions.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 57 |
| firefox | 52 |
| safari | 10.1 |
| edge | 16 |