为什么grid-auto-columns没有效果？

Question

我正在探索CSS Grid Layout，这是我不明白的事情。我使用grid-auto-columns和grid-template-columns，但它不会影响任何东西。

我试图在grid-auto-columns中设置各种值，但它不会影响任何东西。

为什么不？

* {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-columns: 50px;
  grid-auto-rows: 200px;
  grid-gap: 20px;
}

.wrapper>div {
  border: 2px solid rgb(233, 171, 88);
  border-radius: 5px;
  background-color: rgba(233, 171, 88, .5);
  padding: 1em;
  color: #d9480f;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Answer 1

简答

grid-auto-columns没有效果的原因是隐式网格中没有列。

---

说明

在CSS网格布局中，有两种类型的网格：显式和隐式。

显式网格是您明确定义的网格。使用以下属性时创建显式网格：

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid（这是上面三个属性的简写，among others）

但是，您不需要将网格项保留在显式网格中。您可以在任何地方放置项目并创建网格区域，甚至可以在显式网格之外。这就是隐含网格的来源。

隐式网格由行和列创建，这些行和列是自动生成的，以适应位于显式网格之外的网格项。

虽然grid-template-columns和grid-template-rows大小明确的轨道，grid-auto-columns和grid-auto-rows大小隐含轨道。

查看代码，显式网格中有两列和三行。

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-columns: 50px;
  grid-auto-rows: 200px;
  grid-gap: 20px;
}

三个显式行将采用相等的自由空间分布（1fr）。任何其他行的高度为200px。

两个显式列将采用相等的可用空间分布。任何其他列的宽度为50px。

但是在你的代码中，显式网格之外没有列;只有两列。所以grid-auto-columns没有效果。

以下是规范定义这些网格类型的方式：

7.1. The Explicit Grid

grid-template-rows，grid-template-columns和grid-template-areas这三个属性共同定义了网格容器的显式网格。

grid属性是一种速记，可用于同时设置所有三个。

由于网格项放置在显式网格之外，最终网格可能会变大;在这种情况下，将创建隐式轨道，这些隐式轨道将由grid-auto-rows和grid-auto-columns属性调整大小。

---

7.5. The Implicit Grid

grid-template-rows，grid-template-columns和grid-template-areas属性定义了形成显式网格的固定数量的轨道。

当网格项位于这些边界之外时，网格容器通过向网格添加隐式网格线来生成隐式网格轨迹。

这些线与显式网格一起形成隐式网格。

grid-auto-rows和grid-auto-columns属性调整这些隐式网格轨道的大小。