grid-template-columns

Summary

Specifies (with grid-template-rows) the line names and track sizing functions of the grid. Each sizing function can be specified as a length, a percentage of the grid container’s size, a measurement of the contents occupying the column or row, or a fraction of the free space in the grid.

Overview table

Initial value

none

Applies to

grid containers

Inherited

No

Media

visual

Computed value

As specified, except for “auto”

Animatable

No

CSS Object Model Property
:

Percentages

N/A

Syntax

• grid-template-columns: <track-list>
• grid-template-columns: none
• grid-template-columns: subgrid <line-name-list>

Values

none

Indicates that there is no explicit grid; any rows/columns will be implicitly generated, and their size will be determined by the grid-auto-rows and grid-auto-columns properties.

<track-list>

Specifies the track list for the grid columns. See specification for complete syntax.

subgrid <line-name-list>

Indicates that the grid will align to its parent grid in that axis. Rather than specifying the sizes of rows/columns explicitly, they will be taken from the parent grid’s definition. If the grid container is not a grid item, this value computes to "none".

Examples

grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
/* Creates five grid lines:
1. At the start edge of the grid container
2. 100px from the start edge of the grid container
3. At a distance from the previous line equal to half the free space
   (the width of the grid container minus the width of the non-flexible grid tracks)
4. At a distance from the previous line equal to the maximum size of any grid items
   belonging to the column between these two lines
5. At a distance from the previous line at least as large as the largest minimum size of any grid items
   belonging to the column between these two lines, but no larger than the other half of the free space
*/

Related specifications

CSS Grid Layout Module Level 1

W3C Working Draft