#grid-auto-columns

#介绍

指定网格布局的隐式网格纵向轨道（track）的宽度。此属性作用在网格容器上。

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

#使用示例

css-apisrc/grid-auto-columns/App.tsx

预览

#语法

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

/* <length> values */
grid-auto-columns: 100px;

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

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

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

#取值

• auto

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

  网格轨道大小为 auto（且只有为 auto）时，才可以被属性 justify-content（justify-content 默认值是 stretch）拉伸。

• <length>

  <length> 定义了非负值的长度大小。

• <percentage>

  非负值且相对于网格容器宽度的 <percentage>。建议在网格容器的宽度尺寸是确定值情况下使用。不然，如果网格容器的尺寸大小依赖网格轨道的大小，则可能会有不符合预期的表现。

• <flex>

  非负值，用单位 fr 来定义网格轨道大小的弹性系数。每个定义了 <flex> 的网格轨道会按比例分配剩余的可用空间。当外层用一个 minmax() 表示时，它将是一个自动最小值（即 minmax(auto, <flex>)）。

• max-content

  是一个用来表示以网格项的最大的内容来占据网格轨道的关键字。

• minmax(min, max)

  是一个来定义大小范围的属性，大于等于 min 值，并且小于等于 max 值。如果 max 值小于 min 值，则该值会被视为 min 值。最大值可以设置为网格轨道系数值 <flex>，但最小值则不行。

• fit-content( [ <length> | <percentage> ] )

  相当于公式 min(max-content, max(auto, argument))，类似于 auto 的计算（即 minmax(auto, max-content)），除了网格轨道大小值是确定下来的，否则该值都大于 auto 的最小值。

#形式定义

#形式语法

grid-auto-columns =
  <track-size>+

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

<track-breadth> =
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  max-content                |
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  |
  max-content                |
  auto

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

#与 Web 的区别

• 不支持 [linename] 和 min-content。

#兼容性

LCD tables only load in the browser