Defining grids using names
grid-template-areas
Use this property to define a grid system based on arbitrary names that have user-specific meanings.
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 grid-template-areas
property declares the alias names to be used with a grid container. This is done using a series of area-names, assembled into quote-delimited declarations. There should be one quote-delimited declaration for each row, and each declaration should contain the same number of area names.
For example, a container with header, body, footer, menu and sidebar might be defined like this:
This property should be used together with grid-template-rows
and grid-template-columns
in order to define the height of each row and the width of each column.