grid-auto-columns 和 grid-auto-rows 是 CSS Grid Layout（网格布局）中的两个重要属性，它们用于定义在显式网格（即那些通过 grid-template-columns、grid-template-rows 或 grid-template-areas 明确指定的网格区域）之外的隐式网格（即自动创建的网格线之间的空间）中的列和行的尺寸。

grid-auto-columns

grid-auto-columns 属性指定了隐式网格中网格轨道（grid tracks，即网格中的行或列）的列宽。如果网格项（grid items）被放置在显式网格之外，浏览器会自动创建额外的网格线来容纳这些项，而 grid-auto-columns 就是用来指定这些新创建的列的宽度的。

语法示例：

.grid-container {
  display: grid;
  grid-auto-columns: 100px; /* 隐式网格中的列宽为100px */
}
  • 1.
  • 2.
  • 3.
  • 4.

你也可以使用 minmax() 函数来指定一个最小宽度和一个最大宽度（如果可用的话），或者使用 auto 关键字让浏览器自动计算宽度。

grid-auto-rows

与 grid-auto-columns 类似，grid-auto-rows 属性用于指定隐式网格中网格轨道的行高。当网格项需要被放置在显式网格的行之外时，grid-auto-rows 属性定义的行高就会被应用。

语法示例：

.grid-container {
  display: grid;
  grid-auto-rows: 50px; /* 隐式网格中的行高为50px */
}
  • 1.
  • 2.
  • 3.
  • 4.

同样，你也可以使用 minmax() 函数或 auto 关键字来指定行高的具体值或计算方式。

示例

假设你有一个网格容器，它只明确指定了两列和两行，但你想在其中放置更多的网格项。这些额外的网格项将会触发隐式网格的创建，而 grid-auto-columns 和 grid-auto-rows 将决定这些新创建的网格轨道的尺寸。

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px; /* 明确指定的两列宽度 */
  grid-template-rows: 50px 100px; /* 明确指定的两行高度 */
  grid-auto-columns: 150px; /* 隐式网格列的宽度 */
  grid-auto-rows: 75px; /* 隐式网格行的高度 */
}

.grid-item {
  /* 网格项的样式 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

在这个例子中，前两个网格项将占据明确指定的网格区域，而任何额外的网格项都将被放置在隐式网格中，其列宽为 150px，行高为 75px。