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

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

57

291

16

52

402

No

44

283

10.1
minmax()

57

291

12

52

402

?

44

283

10.1
repeat()

57

Yes4

16

57

52 — 575

Yes — 526

No

44

Yes7

10.1
fit-content()291651 No4410.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support57

57

291

16

52

402

4410.36.0
minmax() No ?12

52

402

No10.3 ?
repeat() ? ? No

57

52 — 575

Yes — 526

?10.3 ?
fit-content()575716514410.37.0

1. From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

2. 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.

3. From version 28: this feature is behind the Enable experimental Web Platform features preference.

4. This feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

5. calc() doesn't work in repeat() (see bug 1350069).

6. 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.

7. This feature is behind the Enable experimental Web Platform features preference.

参见

文档标签和贡献者

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