网格自动列 | grid-auto-columns

grid-auto-columns

该grid-auto-columnsCSS属性指定的隐含创建的网格列的大小轨道。

/* 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;

如果一个网格项目被定位到一个没有明确的大小的列中，则grid-template-columns隐式网格轨道被创建来保存它。这可以通过显式定位到超出范围的列中，或通过自动布局算法创建附加列来实现。

初始值	auto
应用于	grid containers
是否继承	no
百分比	refer to corresponding dimension of the content area
适用媒体	visual
计算值	the percentage as specified or the absolute length
动画类型	discrete
规范顺序	the unique non-ambiguous order defined by the formal grammar

语法

取值

<length>是一个非负的长度。相对于网格容器的块大小<percentage>是一个非负值<percentage>。如果网格容器的块大小是不确定的，百分比值将被视为像auto。

当出现在minmax()符号之外时，它意味着自动最小（即minmax(auto, <flex>)）。

max-content是表示占据网格轨道的网格项目的最大最大内容贡献的关键字。

注意：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内容

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

CSS内容

#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 LayoutThe definition of 'grid-auto-columns' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari
Basic support	57.01	52.0 (52.0)2	10.0-ms3	20-ms3	444	10.1

Feature	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	57.01	57.01	52.0 (52.0)2	10.0-ms3	44	No support