grid-template

A shorthand for the grid-template-row, column and areas properties. The grid-template syntax allows for a condensed specification of a grid structure and the location of elements.

Syntax

.grid-container {
display: grid;
grid-template: <grid-value>;
}

A <grid-value> can be one of the following:

  • Grid keyword: auto, minmax(), repeat()
  • Pixel value: 300px
  • Percent value: 25%
  • Fractional unit value: 1fr
  • A string: 'header'

Common syntax patterns:

  • <area value> <row value> / <col value>
  • <row value> / <col value>
  • <area value>

Example 1

A grid in which the ‘text’ block occupies a space with the coordinates row two, column two:

#item-a {
grid-area: text;
}
#spam-container {
display: grid;
grid-template:
'. header header header .'
'. text image image .'
'. footer footer footer .';
}

Note: A period represents a blank space.

Example 2

A grid with three rows and five columns:

#eggs-container {
display: grid;
grid-template: 10% 80% 10% / auto 300px 300px 300px auto;
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy