grid-template-columns

The grid-template-columns property designates the number and widths of the columns in a grid layout.

Syntax

The width of each column is specified in a space separated list of values. First value is for the first column, second value for the second column, and so on.

.container { 
  display: grid; 
  grid-template-columns: 150px 200px;
}

Values

none
Default value. No width is set and columns are created as necessary.

auto
The size of the container and the size of the content of the items in the column determines the size of the columns.

max-content
The largest item in the column sets the size of the column.

min-content
The smallest item in the column sets the size of the column.

length
Designates the column’s size in px, cm, em, rem, etc.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of grid-template-columns? Submit a codepen.io demo and we'll showcase it here ↴