grid-template-columns
CSS property defines the line names and track sizing functions of the
grid columns
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
注意
: Edge and Internet Explorer also feature support for an alias of
grid-template-columns
—
-ms-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;
/* <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
特性。
[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>
A non-negative length, giving the width of the column.
<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
Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.
min-content
Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.
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.
注意：
auto
track sizes (and only
auto
track sizes) can be stretched by the
align-content
and
justify-content
特性。
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> )
Represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.
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 subgrid value is from Level 2 of the Grid specification and currently only has implementation in Firefox 71 and onwards.
| 初始值 |
none
|
|---|---|
| 适用于 | grid containers |
| 继承 | no |
| 百分比 | refer to corresponding dimension of the content area |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| 动画类型 | 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;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS 栅格布局
The definition of 'grid-template-columns' in that specification. |
候选推荐 | 初始定义 |
|
CSS Grid Layout Module Level 2
The definition of 'subgrid' in that specification. |
工作草案 | Adds subgrid |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
grid-template-columns
|
Chrome
完整支持
57
|
Edge
完整支持
16
|
Firefox
完整支持
52
|
IE
完整支持
10
Alternate Name
|
Opera
完整支持
44
|
Safari 完整支持 10.1 | WebView Android 完整支持 57 |
Chrome Android
完整支持
57
|
Firefox Android
完整支持
52
|
Opera Android
完整支持
43
|
Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 6.0 |
| Animation of tracks | Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 66 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 66 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
fit-content()
|
Chrome 完整支持 29 | Edge 完整支持 16 | Firefox 完整支持 51 | IE 不支持 No | Opera 完整支持 44 | Safari 完整支持 10.1 | WebView Android 完整支持 57 | Chrome Android 完整支持 57 | Firefox Android 完整支持 51 | Opera Android 完整支持 43 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 6.0 |
minmax()
|
Chrome
完整支持
57
|
Edge 完整支持 16 |
Firefox
完整支持
52
|
IE 不支持 No |
Opera
完整支持
44
|
Safari 完整支持 10.1 | WebView Android 完整支持 57 |
Chrome Android
完整支持
57
|
Firefox Android
完整支持
52
|
Opera Android
完整支持
43
|
Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 6.0 |
repeat()
|
Chrome
完整支持
57
|
Edge 完整支持 16 |
Firefox
完整支持
76
|
IE 不支持 No |
Opera
完整支持
44
|
Safari 完整支持 10.1 | WebView Android 完整支持 57 |
Chrome Android
完整支持
57
|
Firefox Android
完整支持
52
|
Opera Android
完整支持
43
|
Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 6.0 |
subgrid
|
Chrome 不支持 No | Edge 不支持 No |
Firefox
完整支持
71
|
IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
见实现注意事项。
用户必须明确启用此特征。
使用非标名称。
grid-template-rows
,
grid-template-areas
,
grid-template