CSS grid-template-columns Eigenschaft

Definition and usage

The grid-template-columns property specifies the number of columns (and width) in the grid layout.

These values are a list separated by spaces, where each value specifies the size of the corresponding column.

See also:

CSS tutorial:CSS grid layout

CSS reference manual:grid-template-rows property

CSS reference manual:grid-template property

Example

Example 1

Create a four-column grid container:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Try it yourself

Example 2

Create a four-column grid layout and specify the size of each column:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

Try it yourself

CSS syntax

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

Attribute value

Value Description
none Default value. Create columns as needed.
auto The size of the columns depends on the size of the container and the size of the content of the items in the columns.
max-content Set the size of each column based on the largest item in the column.
min-content Set the size of each column based on the smallest item in the column.
length Set the size of the columns by using valid length values. SeeLength units.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical details

Default value: none
Inheritance: No
Animation production: Supported. See:Animation-related properties.
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridTemplateColumns="50px 50px 50px"

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44