grid-auto-columns

如果网格项目被定位到未由 grid-template-columns 显式设置大小的列中，则会创建隐式 网格 轨道来容纳它。这可以通过显式地定位到超出范围的列中，或通过自动放置算法创建其他列来实现。

<length>

是一个非负长度。

<percentage>

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

<flex>

是一个非负维度，单位为 fr，指定轨道的弹性因子。每个 <flex> 大小的轨道都会根据其弹性因子按比例占用剩余空间。

当出现在 minmax() 表示法之外时，它表示自动最小值（即 minmax(auto, <flex>)）。

max-content

是一个关键字，表示占用网格轨道的网格项的最大最大内容贡献。

min-content

是一个关键字，表示占用网格轨道的网格项的最大最小内容贡献。

minmax(min, max)

是一个函数表示法，定义了一个大小范围，大于或等于 min，小于或等于 max。如果 max 小于 min，则忽略 max，并将该函数视为 min。作为最大值，<flex> 值设置轨道的弹性因子。作为最小值，它被视为零（或者如果网格容器在最小内容约束下进行大小调整，则为最小内容）。

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

表示公式 min(max-content, max(auto, argument))，其计算方式类似于 auto（即 minmax(auto, max-content)），除了如果轨道大小大于 auto 最小值，则将其限制在 argument 上。

auto

作为最大值，表示该轨道中项目的最大 max-content 大小。

作为最小值，表示该轨道中项目的最大最小大小（由项目的 min-width/min-height 指定）。这通常（尽管并非总是）是 min-content 大小。

如果在 minmax() 表示法之外使用，则 auto 表示上述最小值和最大值之间的范围。在大多数情况下，此行为类似于 minmax(min-content,max-content)。

注意：auto 轨道大小（并且只有 auto 轨道大小）可以通过 align-content 和 justify-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,∞]>               |
  min-content                |
  max-content                |
  auto                       

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

<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";
  gap: 10px;
  grid-auto-columns: 200px;
}

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

结果

• grid-auto-rows
• grid-auto-flow
• grid
• 网格布局中的自动放置：调整隐式网格中行的尺寸
• 视频：介绍网格自动放置和顺序