CSS grid-template attribute


example

Make a three column grid layout , The first row is high 150 pixel :

.grid-container { display: grid ; grid-template: 150 px / auto auto auto ; }

Give it a try »

Browser support

The number in the table indicates the first browser version number that supports this attribute .

attribute
grid-template 57 16 52 10 44

Attribute definition and instructions

grid-template Property is used for grid layout , Set the rows in the grid 、 Columns and partitions .

grid-template Is a short form of the following properties :

Default value : auto
inherit : no
Animation : support . Read about animatable Give it a try
edition : CSS Grid layout module Level 1
JavaScript Grammar : object.style.gridTemplate="250px / auto auto" Give it a try


Grammar

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;

Worth Describe
none Default value , Do not specify the size of rows and columns .
grid-template rows / grid-template-columns Specify the size of rows and columns .
grid-template-areas Use the name of the grid element to lay out the grid .
initial Set this property to the default value . Read about initial
inherit Inherit this attribute from the parent element . Read about inherit

More examples

example

Set two lines , Among them "item1" Span the first two columns in the first two rows :

.item1 { grid-area: myArea ; } .grid-container { display: grid ; grid-template: ' myArea myArea . . .' ' myArea myArea . . .' ; }

Give it a try »

Name all grid elements , And make a web page template :

example

.item1 { grid-area: header ; } .item2 { grid-area: menu ; } .item3 { grid-area: main ; } .item4 { grid-area: right ; } .item5 { grid-area: footer ; } .grid-container { display: grid ; grid-template: ' header header header header header header ' ' menu main main main right right ' ' menu footer footer footer footer footer ' ; }

Give it a try »

Related articles

CSS course : CSS Grid layout

CSS Reference manual : grid-area attribute

CSS Reference manual : grid-template-rows attribute

CSS Reference manual : grid-template-columns attribute

CSS Reference manual : grid-template-areas attribute