Defining grids with fixed columns and rows
grid-template

Use this property to define a grid system that has a fixed number of rows and columns.
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
property is an alternative shorthand to specifying:
grid-template-rows
grid-template-rows / grid-template-columns
grid-template-areas
grid-template-areas grid-template-rows
grid-template-areas grid-template-rows / grid-template-columns
Examples
display: grid;
grid-template: 15% 75% 10%;
display: grid;
grid-template: 15% 75% 10% / 20% 70% 10%;
display: grid;
grid-template: "header header header"
"menu body body"
"menu body sidebar"
"menu body body"
"menu footer footer";
display: grid;
grid-template: "header header header" 10%
"menu body body" 5%
"menu body sidebar" 70%
"menu body body" 5%
"menu footer footer" 10%;
display: grid;
grid-template: "header header header" 10%
"menu body body" 5%
"menu body sidebar" 70%
"menu body body" 5%
"menu footer footer" 10% / 1.5fr 7.5fr 1fr;