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是行，并且没有定义显式列，也没有定义隐式列，因此您将拥有一列和与元素一样多的行。

您可以通过设置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 仅在通过手动放置元素(就像您所做的那样)或通过更改创建隐式网格轨道时使用自动放置算法(就像我所做的那样)。行方向发生相同的逻辑，但由于默认流程是行，因此更加直观。

基本上，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>