css - CSS 中隐式和显式定义的列

Question

我正在做一个关于 CSS grid 的在线测验，我对其中一个问题感到困惑。

问题是:

Imagine we have a grid with the following CSS properties, with 4 boxes inside of it. If we added a fifth box to the HTML, what width would it have?

代码如下:

.grid {
  grid-template-rows: repeat(2, 50px);
  grid-template-columns: repeat(2, 100px);
  grid-auto-rows: 60px;
  grid-auto-columns: 70px;
 }

我的想法是:所以已经有四个盒子了，如果我们要添加一个新盒子，它会触发“grid-auto-rows”和“grid-auto-columns”。所以它的宽度为 70 像素。

但是答案是这样的:

The new box will still be in one of the explicitly defined columns, which are 100 pixels each.

为什么新框会出现在明确定义的列之一中？里面不是已经有四间了，而且都住满了吗？

Answer 1

您的第五个元素的宽度确实是 100px，由 grid-template-columns 定义。

原因如下:

最初的四个框创建一个 2x2 网格，正如您在网格容器中定义的那样:

article {
  display: grid;
  grid-template-rows: repeat(2, 50px);
  grid-template-columns: repeat(2, 100px);
  grid-auto-rows: 60px;
  grid-auto-columns: 70px;
}

section {
  background-color: lightgreen;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9em;
}

<article>
  <section>100 x 50</section>
  <section>100 x 50</section>
  <section>100 x 50</section>
  <section>100 x 50</section>
</article>

然后添加第五个元素。该元素位于显式网格区域之外。

此时您需要考虑 grid-auto-flow属性(property)。

此属性控制未明确放置的网格项(也称为“自动放置项”)的放置。

它的默认值为row，这意味着自动放置的元素逐行排列，填充每一行，并根据需要添加新行。

因为您的网格容器默认为 grid-auto-flow: row，并且所有显式行都已填充，在隐式网格中创建了一个新行以容纳第五项.

第五项在第 1 列第 3 行结束。

第 1 列已存在。它由 grid-template-columns 创建，宽度为 100px。

第 3 行是新的和隐含的。它的高度为 60px，如 grid-auto-rows 中所定义。

article {
  display: grid;
  grid-template-rows: repeat(2, 50px);
  grid-template-columns: repeat(2, 100px);
  grid-auto-rows: 60px;
  grid-auto-columns: 70px;
}

/* non-essential demo styles */
section {
  background-color: lightgreen;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9em;
}

<article>
  <section>100 x 50</section>
  <section>100 x 50</section>
  <section>100 x 50</section>
  <section>100 x 50</section>
  <section>100 x&nbsp;<b>60</b></section>  
</article>

如果您改为使用 grid-auto-flow: column，则自动放置的元素将垂直流动，填充列并根据需要创建新列。那么您的第五个元素将是 70 像素宽。

article {
  display: grid;
  grid-template-rows: repeat(2, 50px);
  grid-template-columns: repeat(2, 100px);
  grid-auto-rows: 60px;
  grid-auto-columns: 70px;
  grid-auto-flow: column; /* new */
}

/* non-essential demo styles */
section {
  background-color: lightgreen;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9em;
}

<article>
  <section>100 x 50</section>
  <section>100 x 50</section>
  <section>100 x 50</section>
  <section>100 x 50</section>
  <section><b>70</b>&nbsp;x 50</section>  
</article>