Question

我正在进行有关CSS网格的在线测验，但我对其中一个问题感到困惑。

问题出在这里：

想象一下，我们有一个具有以下CSS属性的网格，其中包含4个框。如果我们在HTML中添加第五个框，它的宽度是多少？

这是代码：

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

我的想法是：因此已经有4个框，如果我们要添加一个新框，它将触发“网格自动行”和“网格自动列”。因此其宽度为70像素。

但是答案是这样的：

新框仍将位于明确定义的列之一，每列均为100px。

为什么新框会在明确定义的列之一中？里面已经没有4个了吗？

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属性。

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

其默认值为row，这意味着自动放置的项目逐行布置，填充每一行，并根据需要添加新行。

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

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

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

第3行是新的且隐含的。根据{{1}}的定义，其高度为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 <b>60</b></section> </article>，则自动放置的项目将垂直流动，填充列并根据需要创建新列。那么您的第五项将是70像素宽。

grid-auto-flow: column

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;
}

CSS中隐式和显式定义的列

1 个答案: