CSS grid-template-columns Property

The grid-template-columns CSS property is used to specify the number of columns and the size of the grid's columns. This property accepts multiple values. The number of columns is determined by how many values are assigned to this property.




Property Values

Value Description
none The default value. Columns are added as needed.
auto The size of the columns is determined by the container size as well as the size of the items in the column.
max-content The size of each column is set to be determined by the largest item in the column.
min-content Sets the size of each column to be determined by the column's smallest item.
length Sets the column size by using a legal length value. Learn more about length units.
initial This property is set to its default value.
inherit This property is inherited from its parent element.

Supported Browsers

Property Chrome Firefox Safari Edge / IE Opera
grid-template-columns 57.0 52.0 10.0 16.0 44.0