CSS grid-template-columns Property

CSS grid-template-columns property defines the number of columns and their respective width in a grid layout.

This property takes a list of space-separated values. Each value defines a column and its width within the grid container. The total number of values passed to the grid-template-columns property determines the total number of columns in the layout.

For example, If we use grid-template-columns: auto auto auto;, it will create 3 columns each of the same width(auto) within the grid container. The keyword auto makes the columns resizable and responsive. Try it out:

Example:

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

We can also set each column’s width individually. It can be specified in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, etc. For example:

grid-template-columns: auto 200px 10rem;

The above code means:

  • Column 1(auto): The first column will have an auto width i.e. It will fit in the available space
  • Column 2(‘200px’): The second column will be 200px wide
  • Column 3(’10rem’): The third column will be 10rem wide

Example:

.grid-container{
  display: grid;
  grid-template-columns: auto 200px 10rem;
}

There is one more interesting unit fr that is generally used with CSS grids. The fr is a short form of ‘fraction’. The fr unit represents the ‘fraction of the available space’. We can think of it as a percentage(%) of available space. For example:

grid-template-columns: 200px 1fr 2fr;

The code above represents that:

  • Column 1(‘200px’): The first column will take up 200px space
  • Column 2(‘1fr’): The second column will take up 1 fraction of available space(total_space – 200px) i.e, 1fr/(1fr+2fr) = 33.33% of available space.
  • Column 3(‘2fr’): The third column will take up 2 fraction of available space(total_space-200px) i.e, 2fr/(1fr+2fr) = 66.66% of available space. This means that it will take up twice as much space as the second column.

Example:

.grid-container{
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
}

CSS Syntax

The grid-template-columns property has the following syntax:

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

Property Values

The grid-template-columns property accepts the following values:

noneThis is the default value. There will be only one column in the grid.
autoThe browser itself calculates the width of the column. The column will resize itself if less space is available.
lengthSets the width of the columns in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
max-contentSpecifies that the column will take up the maximum possible width within the grid container.
min-contentSpecifies that the column will take up the minimum possible width within the grid container.
initialSets the grid-template-columns property to its default value(none).
inheritInherits the grid-template-columns property from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.gridTemplateColumns = “auto auto auto”