CSS grid-template Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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
Computed value: See individual properties
Animatable: Yes
JavaScript syntax: object.style.gridTemplate

Interactive Demo

grid-template: 
    "a a a" 40px
    "b c c" 40px
    "b c c" 40px / 1fr 1fr 1fr;

grid-template: 
	"b b a" auto
	"b b c" 2ch
	"b b c" 1em / 20% 20px 1fr;

grid-template: 
	"a a ." minmax(50px, auto)
	"a a ." 80px
	"b b c" auto / 2em 3em auto;

One

Two

Three

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

HTML

<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>

CSS

.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;
}

Result

Editor