grid-auto-columns

CSS 属性 grid-auto-columns 指定了隐式创建的网格纵向轨道(track)的宽度。

如果一个表格项目被定位在没有使用 grid-template-columns 显式指定尺寸的列中,隐式的 grid 轨道就会被创建出来支撑它。显式地定位到超出范围的列中,或者通过自动布局算法创建额外的列,就会发生上诉情况。

语法

/* 以下是不同类型的属性值示例 */
/* Keyword values */
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;

/* <length> values */
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;

/* <percentage> values */
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;

/* <flex> values */
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;

/* minmax() values */
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);

/* fit-content() values */
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);

/* multiple track-size values */
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-columns: inherit;
grid-auto-columns: initial;
grid-auto-columns: unset;

属性值

<length>
指定一个非负的数作为尺寸。
<percentage>
一个非负的百分数(<percentage>),相对于 grid 容器的尺寸。如果 grid 的尺寸不确定,该百分值就会被当作 auto 对待。
<flex>
一个以 fr 为单位非负的尺寸,表示轨道的伸缩系数。每个以 <flex> 定义尺寸的轨道会以该伸缩系数为比例来占据剩余的可用空间。如果使用 minmax(),则表示自动缩小并指定最大尺寸(也就是 minmax(auto, <flex>))。
max-content
一个关键字,表示以网格项的最大的内容来占据网格轨道。
min-content
一个关键字,表示以网格项的最大的最小内容来占据网格轨道。
minmax(min, max)
定义一个尺寸范围,即大于或等于 min 值,并且小于或等于 max 值。如果 max 值小于 min 值,那么 max 值会被忽略并且最终表现为 min 值。最大值可以设置为网格轨道系数值<flex> ,但最小值则不行。
fit-content(argument)
相当于公式 min(max-content, max(auto, argument)),类似于auto 的计算(即 minmax(auto, max-content)),除了网格轨道大小值是确定下来的,否则该值都大于 auto 的最小值。
auto
如果该网格轨道为最大时,该属性等同于 <max-content> ,为最小时,则等同于 <min-content> 。

Note: auto 轨道尺寸 (且只为 auto 值时) 才可以被 align-content 和 justify-content 属性拉伸。

形式语法

<track-size>+

where
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )

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

where
<length-percentage> = <length> | <percentage>

示例

HTML content

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS content

#grid {
  height: 100px;
  display: grid;
  grid-template-areas: "a a";
  grid-gap: 10px;
  grid-auto-columns: 200px;
}

#grid > div {
  background-color: lime;
}

规范

Specification Status Comment
CSS Grid Layout
grid-auto-columns
Candidate Recommendation Initial definition
初始值auto
适用元素grid containers
是否是继承属性
Percentagesrefer to corresponding dimension of the content area
适用媒体visual
计算值the percentage as specified or the absolute length
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
grid-auto-columnsChrome 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 16
Full support 16
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: -ms-grid-columns
Firefox Full support 70
Full support 70
No support 52 — 70
Notes
Notes Does not accept multiple track-size values. See bug 1339672.
No support 40 — 59
Notes Disabled
Notes Does not accept multiple track-size values. See bug 1339672.
Disabled From version 40 until version 59 (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 Full support 10
Alternate Name
Full support 10
Alternate Name
Alternate Name Uses the non-standard name: -ms-grid-columns
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 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.
Firefox Android Partial support 52
Notes
Partial support 52
Notes
Notes Does not accept multiple track-size values. See bug 1339672.
No support 40 — 59
Notes Disabled
Notes Does not accept multiple track-size values. See bug 1339672.
Disabled From version 40 until version 59 (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 Full support 43
Full support 43
Full support 28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Full support 10.3Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
Partial support  
Partial support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

参见