CSS grid-template Property

Description

The grid-template property determines the number, name and width of columns and rows in the grid layout, sets the grid layout template, referring to the names of element areas that are set using the grid-area property. It is a shorthand property for the following properties: grid-template-rows, grid-template-columns and grid-template-areas.

Initial value

See individual properties

Applies to

Grid containers

Inherited

No

Media

Visual

Computed value

See individual properties

Animatable

Yes

CSS Version

CSS3

JavaScript syntax

object.style.gridTemplate

Syntax

grid-template: none | [ <grid-template-rows> / <grid-template-columns> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
where 
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?
where 
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
where 
<length-percentage> = <length> | <percentage>

Values

• noneIs 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-columnsproperties.
• <grid-template-rows> / <grid-template-columns>Sets grid-template-rows and grid-template-columns to the specified values, and sets grid-template-areas to none.
• [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?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).

Example

<div class="grid-container">

   <div>A</div>

   <div>B</div>

   <div>C</div>

   <div>D</div>

   <div>E</div>

   <div>F</div>

   <div>G</div>

   <div>H</div>

</div>

<div class="grid-container2">

   <div>A</div>

   <div>B</div>

   <div>C</div>

   <div>D</div>

   <div>E</div>

   <div>F</div>

   <div>G</div>

   <div>H</div>

</div>

.grid-container,
.grid-container2 {
   display: grid;
   margin-top: 5px; 
   padding: 10px;
   background: rgb(0,150,208);
}
.grid-container > div,
.grid-container2 > div { 
   background: rgb(241,101,41); 
   border: 1px solid #000;
   text-align: center;
} 
.grid-container {
   grid-template: [row1] 1fr [row2] 2fr [row3] 3fr / [col1] 25% [col2] 25% [col3] 25%;
}
.grid-container2 {
   grid-template: 60px 40px 20px /  1fr 2fr 1fr;
}

Browser Support

Desktop
X	16	57	52	44	10.1
Tablets / Mobile
57	57	52	43	10.3	6.0