grid-template-columns property in CSS

Example

A simple grid-template-columns property example:

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

Laboratory

description & Usage

To determine the number and width of columns in a grid layout, we use the grid-template-columns property.

Informations

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

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
grid-template-columns

Syntax

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Values

Values	Description
none	Default
auto	Automatically determines the size of the columns.
max-content	Calculates the size of the columns relative to the largest column on that page.
min-content	It calculates the size of the columns relative to the smallest column in that page.
length	Calculates the size of the columns relative to the legal length set on that page.
initial	Adds this value to its default property.
inherit	It inherits this value from its parent tag.

grid-template-columns property CSS

Example

description & Usage

Informations

Browser compatibility and Support

Syntax

Values