CSS grid-template Property Tutorial

In this section, we will learn what the grid-template property is and how to use it in CSS.

Click here to run the example of grid-template property.

CSS grid-template Property Definition and Usage

The CSS `grid-template` is a shorthand property that is used to set the values for the properties mentioned below in a single declaration:

CSS grid-template Property Syntax

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas

CSS grid-template Property Value

  • “none” is the default value of this property and it means to set all three properties to their initial values.

Example= grid-template: none;

  • We use forward slash “/” in order to separate rows values from columns values.

Example= grid-template: 10vh 100px 10em / [start] 20vw [middle] 20vw [end];

  • The values for `grid-template-areas` can be directly set using `grid-template` property or it can be mixed together with the values of `grid-template-rows` property.

First Example= grid-template: “one one one” “two two two” “three three three”;

  • Here’s the structure of the `grid-template` property when we want to set all values for the three properties:

grid-template: line-name grid-area-value grid-row-size line-name / grid-column-value;

Second Example= grid-template: [start] “one one one” 250px [middle] “two two two” 300px [end] / 30vw 30vw 1fr;

Third Example= grid-template: “one one one” 250px “two two two” 300px / 30vw 30vw 1fr;

Example: grid-template property in CSS

See the Pen grid-template property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: CSS grid-template property

See the Pen CSS grid-template property by Omid Dehghan (@enjoytutorials1) on CodePen.


Top Technologies