css - 网格自动列 : 50px 50px 20px; without template or grid-area

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>

---

The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track.

If a grid item is positioned into a column that is not explicitly sized by grid-template-columns, implicit grid tracks are created to hold it. This can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns. ^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>