CSS grid-template-columns attribute

Definition and Usage

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

These values are a space-separated list, 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 item content in the columns.
max-content Sets the size of each column based on the largest item in the column.
min-content Sets the size of each column based on the smallest item in the column.
length Sets the size of the columns by using valid length values. See alsoLength Units.
initial Sets this property to its default value. See also initial.
inherit Inherits this property from its parent element. See also inherit.

Technical Details

Default Value: none
Inheritance: No
Animation Creation: Supported. See also: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