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 fix 来明确指定行：

.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属性指定隐式创建的网格列轨迹的大小。

如果将网格项放置在未由grid-template-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>

grid-auto-columns：50px 50px 20px;没有模板或网格区域

1 个答案: