CSS grid-template Property

The grid-template property in CSS is a shorthand property for defining grid columns, rows, and areas. It allows you to set values for the following longhand properties: grid-template-rows, grid-template-columns, and grid-template-areas.

Syntax

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

Property Values:

1. none:

Resets the sizing of rows and columns to their default values.

Example:

Output:

👁 Image

2. grid-template-rows/grid-template-columns:

This property value is used to specify size of rows and columns measured in px, cm etc. If the user wants the row or column size to remain default then set that row or column to "auto".

Example:

Output:

👁 Image

3. grid-template-areas:

This property value specifies areas within the grid layout. grid-area property is used to name the grid items and then reference them using grid-template-areas.

Example:

Output:

👁 Image

4. initial:

This property value will set the property to its default value.

Example:

Output:

👁 Image

5. inherit:

This will inherit this property from its parent element.

Example:

Output:

👁 Image

The grid-template property is a powerful shorthand tool for defining the structure and layout of CSS grids. By combining grid-template-rows, grid-template-columns, and grid-template-areas, you can create complex and responsive grid layouts with ease.

Supported Browsers: The browser supported by CSS grid-template Property are listed below: 

• Google Chrome 57.0
• Edge 16
• Firefox 52.0
• Safari 10.1
• Opera 44.0