grid-definition-columns

Summary

This property can specify the length, a percentage of the grid container’s size, a measurement of the contents occupying the column, or a fraction of the free space in the grid. You can also specify a range using minmax(), which combines any of these measurements to define a min and max size for the column.

As well as referring to grid lines by their numerical index, you can also name lines. Names can make the grid-placement properties easier to understand and maintain. Lines can have multiple names, such as ‘first’ and 'header’.

Overview table

Initial value: none
Applies to: grid containers
Inherited: No
Media: visual
Computed value: As specified, except for ‘auto’ (see prose)
Animatable: No
CSS Object Model Property: gridDefinitionColumns
Percentages: n/a

Syntax

grid-definition-columns: <track-list>
grid-definition-columns: none

Values

none: No initial grid; any columns are implicitly generated with their size determined by the ‘grid-auto-columns’ property.
<track-list>: The track-list syntax is:

<track-list> = [ <string>* [ <track-size> | <repeat-function> ] ]+ <string>*

<track-size> = minmax( <track-breadth> , <track-breadth> ) | auto | <track-breadth>

<track-breadth> = <length> | <percentage> | <flex> | min-content | max-content

Where the values are described as:

<length>
<percentage>: Percentage values are relative to the grid container width in grid column tracks. If the grid container measure is an indefinite size, <percentage> values relative to that size are treated as ‘auto’.
<flex>: A non-negative dimension with the unit "fr". Each <flex> value takes a share of the remaining space in proportion to its value. See Flexible Lengths for more details.
max-content: Largest max size contribution of the grid items occupying the grid track.
min-content: Largest min size contribution of the grid items occupying the grid track.
minmax(min, max): Defines a size range greater than or equal to min and less than or equal to max. If max < min, then max is ignored and ‘minmax(min,max)’ is treated as min.
auto: Computes to ‘minmax(min-content, max-content)’.

Examples

We define four values corresponding to each columns of our grid. First column will be exactly 100 pixels, second column will use flex units and will take one ‘fr’ of the remaining space but because of the third columns which takes up two 'fr’. That means the remaining space will divide on three, and second column will take 1/3 of this, and third column will take 2/3.

#myGrid {
  display: grid;
  grid-definitions-columns: 100px 1fr 2fr;
}

We define three columns where the first one will adapt to its content, the second will take 250 pixels of the screen and third one will take 50% of its container.

#myGrid {
  display: grid;
  grid-definitions-columns: auto 250px 50%
}

We can also make use of the min/max values. We define two columns where first one take one ‘fr’ and the second can use either the minimum content of its size, or the maximum value of 1fr. Notice that we gave names on right lines of each columns. That way we can refer to those lines when we define how space will take their contents.

#myGrid {
  display: grid;
  grid-definition-columns: 1fr "aside" minmax(min-content, 1fr) "main";
}

At last, `repeat` function can be used to create a repeating sequence.

#myGrid {
  display: grid;
  grid-definition-columns: repeat(3, 100px 1fr); // which equals to
  grid-definition-columns: 100px, 1fr, 100px, 1fr, 100px, 1fr;
}

Related specifications

CSS Grid Layout, Track Sizing: the ‘grid-definition-rows’ and ‘grid-definition-columns’ properties: W3C Editor’s Draft
CSS Grid Layout, Track Sizing: the ‘grid-definition-rows’ and ‘grid-definition-columns’ properties: W3C Working Draft

grid-definition-columns

Summary

Overview table

Syntax

Values

Examples

Related specifications

See also

Related articles

CSS Layout

Grid Layout

External resources