grid-template

The grid-template property is the shorthand property for grid-template-rows, grid-template-columns, and grid-template-areas (in that order).

Syntax

Explain the syntax of this reference item and show an example in the code block below. Try to remove as much unnecessary items as possible. It’s important this is easy to process at a glance.

/* A 2-column grid layout in which the first row is 200px high */

.container {
  display: grid;
  grid-template: 200px / auto auto;
}

Values

none
Default value. Columns and rows do not have any specific sizing.

grid-template-rows/grid-template-columns
Designates the size(s) of the rows and columns.

grid-template-areas
Uses named items to designate the grid layout.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of grid-template? Submit a codepen.io demo and we'll showcase it here ↴