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:

display: grid;            
grid-template-areas: "header header header"
"menu body body"
"menu body sidebar"
"menu body body"
"menu footer footer";

grid-template-rows: 10% 5% 70% 5% 10%;
grid-template-columns: 15% 75% 10%;
A grid container with 5 rows and 3 columns

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.

style > grid > grid-template-areasDefining grids using names

Q