All-in-one spec
grid
Specify all of these grid properties at once: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.
Definitions
Refer to these definitions to better understand how the property values are used.
Grid lines
Each reference to a grid line refers to the imaginary line on either side of grid cells.
For a layouts with N rows, there are N+1 horizontal grid lines — one at the top, one between each row, and one at the bottom.
For a layouts with M columns, there are M+1 vertical grid lines — one at the left edge, one between each column, and one at the right edge.
Grid lines are numbered starting at 1. For rows, the topmost line is 1 and the bottommost line is N+1. For columns, the leftmost line is 1 and the rightmost line is M+1. *
* Arabic, Hebrew and other left-to-right writing systems, reverse everything.Grid line aliases
For clarity and ease of use, each grid line can be aliased with an arbitrary name. That alias can be used with grid-row-start
, grid-row-end
, grid-column-start
and grid-column-end
property values.
Grid line aliases are defined when specifying grid-template-rows
, grid-template-columns
, and grid-template-areas
.
In addition, when a grid line alias is declared by the user within a grid-template-areas
definition, the browser implicitly defines two other names that can be used in those start/end properties. For example, if a grid-template-areas
defines an area named foo
:
generated name | property | interpretation |
---|---|---|
'foo-start' | grid-row-start | The topmost line of the area |
'foo-start' | grid-column-start | The leftmost line of the area |
'foo-end' | grid-row-end | The bottommost line of the area |
'foo-end' | grid-column-end | The rightmost line of the area |
Property values
The syntax for the grid
property can follow one of these formats:
- fixed rows and columns
- fixed areas
- flexible rows
- flexible columns
Fixed rows and columns format
This explicitly defines the grid with template columns and template rows using the rules for grid-template-rows
and grid-template-columns
.
Fixed areas format
This explicitly defines the grid with template areas using the rules for grid-template-areas
.
Flexible rows format
Specify three properties grid-auto-flow
grid-auto-rows
/ grid-template-columns
to create a grid with fixed columns and expanding rows.
Flexible columns format
Specify three properties: grid-template-rows
/ grid-auto-flow
grid-auto-columns
to create a grid with fixed rows and expanding columns.