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.
