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-rowsgrid-template-rows / grid-template-columnsgrid-template-areasgrid-template-areas grid-template-rowsgrid-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;