CSS `grid-template-columns` Property

Example

Create a 4-column grid container:

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

The numbers in the table specify the first browser version that fully supports the property.

Property	Chrome	Edge	Firefox	Safari	Opera
grid-template-columns	57	16	52	10	44

The grid-template-columns property is used to specify the number and widths of columns in a grid layout.

Default value:	auto
Inherited:	no
---	---
Animatable:	Yes. Read about animatable Try it
---	---
Version:	CSS Grid Layout Module Level 1
---	---
JavaScript syntax:	object.style.gridTemplateColumns="50px 50px 50px" Try it
---	---

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

Value	Description
none	Default value. No specific size is assigned to the columns.
auto	The size of the columns is determined by the size of the container and the content size of the grid items in the columns.
max-content	Each column is sized to fit the largest grid item in that column.
min-content	Each column is sized to fit the smallest grid item in that column.
length	Specifies a fixed length for the columns, using px or percentage %. 0 is the default value. Learn more about length units
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Create a 4-column grid container with specific sizes for each column:

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

CSS Reference: grid-area Property

CSS Reference: grid-template-rows Property

CSS Reference: grid-template-columns Property

CSS Reference: grid-template-areas Property