grid-template property in CSS

Example

A simple grid-template property example:

.grid-container {
    display: grid;
    grid-template: 150px / auto auto auto;
    grid-gap: 15px;
    background-color: #2196F3;
    padding: 15px;
}

Laboratory

description & Usage

The grid-template property is a shorthand property for:

grid-template-rows
Grid-Pattern-Columns
grid-pattern-areas

Informations

#	Description
Default Value	none none none
Inherited	no
Animatable	yes
Version	CSS Grid Layout Module Level 1
JavaScript syntax	object.style.gridTemplate="250px / auto auto"

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
grid-template

Syntax

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

Values

Values	Description
none	Defaul
grid-template rows / grid-template-columns	Determines the size of columns and rows.
grid-template-areas	Determines the network design with the productivity of the named items.
initial	Adds this value to its default property.
inherit	It inherits this value from its parent tag.

grid-template property CSS

Example

description & Usage

Informations

Browser compatibility and Support

Syntax

Values