The grid-template-columns
CSS property defines the line names and track sizing functions of the grid columns.
/* Keyword value */ grid-template-columns: none; /* <track-list> values */ grid-template-columns: 100px 1fr; grid-template-columns: [linename] 100px; grid-template-columns: [linename1] 100px [linename2 linename3]; grid-template-columns: minmax(100px, 1fr); grid-template-columns: fit-content(40%); grid-template-columns: repeat(3, 200px); grid-template-columns: subgrid; grid-template-columns: masonry; /* <auto-track-list> values */ grid-template-columns: 200px repeat(auto-fill, 100px) 300px; grid-template-columns: minmax(100px, max-content) repeat(auto-fill, 200px) 20%; grid-template-columns: [linename1] 100px [linename2] repeat(auto-fit, [linename3 linename4] 300px) 100px; grid-template-columns: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /* Global values */ grid-template-columns: inherit; grid-template-columns: initial; grid-template-columns: unset;
none
grid-auto-columns
property.[linename]
<custom-ident>
specifying a name for the line in that location. The ident may be any valid string other then the reserved words span
and auto
. Lines may have multiple names separated by a space inside the square brackets, for example [line-name-a line-name-b]
.<length>
<percentage>
<percentage>
value relative to the inline size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as auto
.<flex>
fr
specifying the track’s flex factor. Each <flex>
-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a minmax()
notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)
).
max-content
min-content
minmax(min, max)
<flex>
value sets the track’s flex factor. It is invalid as a minimum.auto
min-width
/min-height
) of the grid items occupying the grid track.Note: auto
track sizes (and only auto
track sizes) can be stretched by the align-content
and justify-content
properties.
fit-content( [ <length> | <percentage> ] )
min(max-content, max(auto, argument))
, which is calculated similar to auto
(i.e. minmax(auto, max-content)
), except that the track size is clamped at argument if it is greater than the auto
minimum.repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
masonry
subgrid
subgrid
value indicates that the grid will adopt the spanned portion of its parent grid in that axis. Rather than being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid’s definition.The masonry
value is from Level 3 of the Grid specification and currently only has an experimental implementation behind a flag in Firefox.
The subgrid
value is from Level 2 of the Grid specification and currently only has implementation in Firefox 71 and onwards.
Initial value | none |
---|---|
Applies to | grid containers |
Inherited | no |
Percentages | refer to corresponding dimension of the content area |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |
none | <track-list> | <auto-track-list> | subgrid <line-name-list>?where
<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> = [ <line-names> | <name-repeat> ]+where
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>where
<length-percentage> = <length> | <percentage>
<div id="grid"> <div id="areaA">A</div> <div id="areaB">B</div> </div>
#grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; } #areaA { background-color: lime; } #areaB { background-color: yellow; }
Specification | Status | Comment |
---|---|---|
CSS Grid Layout The definition of 'grid-template-columns' in that specification. | Candidate Recommendation | Initial definition |
CSS Grid Layout Module Level 2 The definition of 'subgrid' in that specification. | Working Draft | Adds subgrid |
CSS Grid Layout Module Level 3 The definition of 'masonry layout' in that specification. | Editor's Draft | Adds masonry |
Desktop | ||||||
---|---|---|---|---|---|---|
grid-template-columns |
57
|
16
|
52
|
10
|
44
|
10.1 |
Animation of tracks | No | No | 66 | No | No | No |
fit-content() |
29 | 16 | 51 | No | 44 | 10.1 |
minmax() |
57
|
16 | 52
|
No | 44
|
10.1 |
repeat() |
57
|
16 | 76
|
No | 44
|
10.1 |
subgrid |
No | No | 71
|
No | No | No |
Mobile | ||||||
---|---|---|---|---|---|---|
grid-template-columns |
57 | 57
|
52
|
43
|
10.3 | 6.0 |
Animation of tracks | No | No | 66 | No | No | No |
fit-content() |
57 | 57 | 51 | 43 | 10.3 | 6.0 |
minmax() |
57 | 57
|
52
|
43
|
10.3 | 6.0 |
repeat() |
57 | 57
|
52
|
43
|
10.3 | 6.0 |
subgrid |
No | No | No | No | No | No |
grid-template-rows
, grid-template-areas
, grid-template
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-grid-columns