Examles
The following declares a grid with as many rows of at least 5em as will fit in the height of the grid container (100vh) and no explicit columns; instead columns are added as content is added. The resulting column widths are equalized. Since content overflowing to the right won’t print, an alternate layout for printing adds rows instead.
-
The following declares a grid with four named areas:
H,A,B, andF. The first column is sized to fit its contents, and the second column takes up the remaining space. Rows default to auto (content-based) sizing; the last row is given a fixed size of 30px.main { grid: "H H " "A B " "F F " 30px / auto 1fr; } -
The following declares a grid with as many rows
of at least 5em as will fit in the height of the grid container (100vh)
and no explicit columns;
instead columns are added as content is added.
The resulting column widths are equalized.
Since content overflowing to the right won’t print,
an alternate layout for printing adds rows instead.
main { grid: repeat(auto-fill, 5em) / auto-flow 1fr; height: 100vh; } @media print { main { grid: auto-flow 1fr / repeat(auto-fill, 5em); } -
The following declares a grid with 5 evenly-sized columns
and three rows,
with the middle row taking up all remaining space
(and at least enough to fit its contents).
main { grid: auto 1fr auto / repeat(5, 1fr); min-height: 100vh; }
The following declares a grid with four named areas: H, A, B, and F. The first column is sized to fit its contents, and the second column takes up the remaining space. Rows default to auto (content-based) sizing; the last row is given a fixed size of 30px. main { grid: "H H " "A B " "F F " 30px / auto 1fr; }
The following declares a grid with 5 evenly-sized columns and three rows, with the middle row taking up all remaining space (and at least enough to fit its contents). main { grid: auto 1fr auto / repeat(5, 1fr); min-height: 100vh; }