CSS | grid-template-columns Property

The grid-template-columns property is used in CSS Grid Layout to define the size and distribution of columns in a grid container. It allows you to specify a series of track sizes, and can be used either as a single value or as a space-separated list of values.

Syntax

/* single value syntax */
grid-template-columns: <track-size>;

/* multiple value syntax */
grid-template-columns: <track-size> <track-size> ...;

Track Size

The track size can be specified as a length, a percentage, or one of several keywords:

• auto (the default) - the size of the track is based on the size of the grid items that span it
• min-content - the size of the track is based on the size of its contents, but never smaller than the minimum size specified by the content
• max-content - the size of the track is based on the size of its contents, but never larger than the maximum size specified by the content
• fit-content(<length-percentage>) - similar to max-content, but allows for a maximum size to be specified

Examples

Single Value Syntax

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

This will create a grid container with one column that is 100 pixels wide.

Multiple Value Syntax

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

This will create a grid container with three columns, where the first and last columns take up 1 fraction of the available space, and the middle column takes up 2 fractions.

Using Keywords

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

This will create a grid container with columns that have a minimum size of 200 pixels and take up as much space as possible (1fr), but will never be smaller than their content. The auto-fit value allows the number of columns to adjust based on the available space.

Browser Compatibility

The grid-template-columns property is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. It is not supported in Internet Explorer.

Check out this Firefox Grid Inspector tutorial and Can I Use for more information on browser compatibility.