grid-template-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);

/* <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 属性隐式的指定。
<length>
非负值的长度大小。
<percentage>
非负值且相对于网格容器的 <百分比>。 如果网格容器的尺寸大小依赖网格轨道的大小(比如 inline-grid ),则百分比值将被视为auto
为了遵守网格的百分比,网格轨道本身定义的大小,将自动被调整为相对网格容器大小,并且是以最小量将网格轨道调整到最终的大小。
<flex>
非负值,用单位 fr 来定义网格轨道大小的弹性系数。 每个定义了 <flex> 的网格轨道会按比例分配剩余的可用空间。当外层用一个 minmax() 表示时,它将是一个自动最小值(即 minmax(auto, <flex>) ) .
max-content
是一个用来表示以网格项的最大的内容来占据网格轨道的关键字。
min-content
是一个用来表示以网格项的最大的最小内容来占据网格轨道的关键字。
minmax(min, max)
是一个来定义大小范围的属性,大于等于min值,并且小于等于max值。如果max值小于min值,则该值会被视为min值。最大值可以设置为网格轨道系数值<flex> ,但最小值则不行。

Note:  该规范在将来可能会允许设置最小值为 flex ,也会调整网格轨道算法(track sizing algorithm) 计算出正确的大小。

auto
如果该网格轨道为最大时,该属性等同于 <max-content> ,为最小时,则等同于 <min-content> 。

Note: 网格轨道大小为 auto (且只有为 auto ) 时,才可以被属性align-contentjustify-content 拉伸 。

fit-content( [ <length> | <percentage> ] )
相当于公式 min(max-content, max(auto, argument)),类似于auto 的计算(即 minmax(auto, max-content)),除了网格轨道大小值是确定下来的,否则该值都大于 auto 的最小值。
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
表示网格轨道的重复部分,以一种更简洁的方式去表示大量而且重复列的表达式。

正式语法

none | <track-list> | <auto-track-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>?

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>

示例

CSS

#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

结果

规范

规范 状态 备注
CSS Grid Layout
grid-template-columns
Candidate Recommendation 初始定义

初始值none
适用元素grid containers
是否是继承属性
Percentagesrefer to corresponding dimension of the content area
适用媒体visual
计算值as specified, but with relative lengths converted into absolute lengths
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 57
Full support 57
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 16Firefox Full support 52
Full support 52
Full support 40
Disabled
Disabled From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 44
Full support 44
Full support 28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 57
Full support 57
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile Full support 16Firefox Android Full support 52
Full support 52
Full support 40
Disabled
Disabled From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 44Safari iOS Full support 10.3Samsung Internet Android Full support 6.0
minmax()Chrome Full support 57
Full support 57
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 12Firefox Full support 52
Full support 52
Full support 40
Disabled
Disabled From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera Full support 44
Full support 44
Full support 28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 10.1WebView Android No support NoChrome Android ? Edge Mobile Full support 12Firefox Android Full support 52
Full support 52
Full support 40
Disabled
Disabled From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS Full support 10.3Samsung Internet Android ?
repeat()Chrome Full support 57
Full support 57
Full support Yes
Disabled
Disabled This feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 16Firefox Full support 57
Full support 57
No support 52 — 57
Notes
Notes calc() doesn't work in repeat() (see bug 1350069).
No support ? — 52
Disabled
Disabled Until version 52 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 44
Full support 44
Full support Yes
Disabled
Disabled This feature is behind the Enable experimental Web Platform features preference.
Safari Full support 10.1WebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support 57
Full support 57
No support 52 — 57
Notes
Notes calc() doesn't work in repeat() (see bug 1350069).
No support ? — 52
Disabled
Disabled Until version 52 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Full support 10.3Samsung Internet Android ?
fit-content()Chrome Full support 29Edge Full support 16Firefox Full support 51IE No support NoOpera Full support 44Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 57Edge Mobile Full support 16Firefox Android Full support 51Opera Android Full support 44Safari iOS Full support 10.3Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

参见

文档标签和贡献者

标签: 
此页面的贡献者: narol, Alone88
最后编辑者: narol,