网格自动列：50px 50px 20px；没有模板或网格区域

Question

对我来说，一旦我删除 grid-area，grid-auto-columns: 50px 50px 20px; 就不会将容器分成 3 列 50px 50px 20px，这非常违反直觉。在获得 3 列之前，您必须在其上强制使用 grid-area。没有你得到一列。这是为什么？他们为什么要这样设计？

.container {
  display: grid;
  grid-auto-rows: 20px 50px;
  grid-auto-columns: 50px 50px 20px;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
}

div {
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

.area {
  grid-area: 1/1/1/4;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="area">5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

.container {
  display: grid;
  grid-auto-rows: 20px 50px;
  grid-auto-columns: 50px 50px 20px;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
}

div {
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

.area {
  grid-area: 1/1/1/4;
}

<div class="container">
  <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>

Answer 1

这是因为 default flow 是 row 并且没有定义 explicit 列，也没有定义 implicit 列，因此您将拥有一列和与项目一样多的行。

您可以通过设置 grid-template-columns 而不是 grid-auto-columns 来实现您想要的，这将明确定义列（在您的情况下为 3）。

.container {
  display: grid;
  grid-auto-rows: 20px 50px;
  grid-template-columns: 50px 50px 20px;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
}

div {
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

.area {
  grid-area: 1/1/1/4;
}

<div class="container">
  <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>

如果您将流程更改为列，您将拥有以下内容：

.container {
  display: grid;
  grid-auto-rows: 20px 50px;
  grid-auto-columns: 50px 50px 20px;
  grid-auto-flow:column;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
}

div {
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

<div class="container">
  <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>

您会注意到行方向的类似问题（无显式/隐式行 = 1 行和 n 列），您可以修复 grid-template-rows 明确指定行：

.container {
  display: grid;
  grid-template-rows: 20px 50px;
  grid-auto-columns: 50px 50px 20px;
  grid-auto-flow:column;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
}

div {
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

<div class="container">
  <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>

---

grid-auto-columns CSS 属性指定隐式创建的网格列轨道的大小。

如果一个网格项目被定位到一个没有明确地由网格模板列调整大小的列中，则会创建隐式网格轨道来保存它。这可以通过明确定位到超出范围的列，或通过自动放置算法创建额外的列来实现。 ^ref

如您所见，grid-auto-columns 仅在通过 手动 放置项目（就像您所做的那样）或通过更改自动放置算法（像我所做的那样）创建隐式网格轨道时使用）。行方向发生相同的逻辑，但由于默认流是row，所以更直观。

基本上grid-auto-[rows|columns] 有助于确保创建的额外（隐式）行/列遵循特定模式。

行流示例：

.container {
  display: grid;
  /*our explicit grid 4x4 */
  grid-template-rows: 100px 100px;
  grid-template-columns: 100px 100px;
  /**/
  grid-auto-columns: 20px; /*extra columns will have 20px*/
  grid-auto-rows: 40px; /*extra rows will have 40px*/
  grid-row-gap: 5px;
  grid-column-gap: 5px;
}

div {
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div style="grid-column:3">I am creating an implicit column</div>
  <div>7</div>
  <div>8</div>
</div>

和柱流：

.container {
  display: grid;
  /*our explicit grid 4x4 */
  grid-template-rows: 100px 100px;
  grid-template-columns: 100px 100px;
  /**/
  grid-auto-columns: 20px; /*extra columns will have 20px*/
  grid-auto-rows: 40px; /*extra rows will have 40px*/
  grid-auto-flow:column;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
}

div {
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div style="grid-row:3">I am creating an implicit row</div>
  <div>7</div>
  <div>8</div>
</div>