grid-template

The grid-template CSS property is a shorthand property for defining grid columns, rows, and areas.

Initial value as each of the properties of the shorthand:grid-template-columns: nonegrid-template-rows: nonegrid-template-areas: none
Applies to grid containers

Syntax

  
grid-template: 
            "a a a" auto
            "b b c" 2em
            "b b c" 1.4em / 10% 25px 1fr;
  

Values

Is a keyword that sets all three longhand properties to none, meaning there is no explicit grid. There are no named grid areas. Rows and columns will be implicitly generated; their size will be determined by the grid-auto-rows and grid-auto-columns properties.
Sets grid-template-rows and grid-template-columns to the specified values, and sets grid-template-areas to none.
Sets grid-template-areas to the strings listed, grid-template-rows to the track sizes following each string (filling in auto for any missing sizes), and splicing in the named lines defined before/after each size, and grid-template-columns to the track listing specified after the slash (or none, if not specified). Note: The repeat()() function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ASCII art”.

Browser support

grid-templatechrome57edge16firefox52ieopera44safari10.1

We use cookies to improve your experience. Learn more in our Privacy policy.

×