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
Explorer Edge Chrome Firefox Opera Safari
X1657524410.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
5757524310.36.0