html - 使用 CSS GRID 为什么我会得到这个差距？

Question

我正在学习 CSS GRID，我不知道为什么我在下面的示例中遇到了差距。第二个元素可以放在第一个轨道中，但我在那里有一个差距。这是代码:

.container {
  display: grid;
  margin: 40px;
  grid-gap: 20px;
  text-align: center;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.container div {
  background: #ff8000;
}

.container .item1 {
  grid-column: 2/4;
}

<div class="container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

现在，如果我将以下属性 grid-row: 1/2; 添加到第一个元素，现在第二个元素占据第一个轨道。这就是我所期望的。这是添加 grid-row: 1/2;:

的代码

.container {
  display: grid;
  margin: 40px;
  grid-gap: 20px;
  text-align: center;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.container div {
  background: #ff8000;
}

.container .item1 {
  grid-column: 2/4;
  grid-row: 1/2;
}

<div class="container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

我的问题是:

为什么我在第一个代码中出现了差距？第二个元素可以放在第一个轨道中。

我写的第一段代码和第二段代码有什么区别？

Answer 1

您需要了解放置算法才能理解此行为。来自 the specification您可以找到完整的算法以及如何识别何时每个元素将被处理，这是了解这两种情况之间差异的关键。

算法的主要步骤是:

0. Generate anonymous grid items

1. Position anything that’s not auto-positioned.

2. Process the items locked to a given row.

3. Determine the columns in the implicit grid.

4. Position the remaining grid items.

让我们从你的最后一个例子开始，你明确地为第一个元素定义了一个 grid-colum 和 grid-row 不是自动定位元素，所以我们把它放在第 (1) 步。

然后我们将进行第(4)步，对剩余的item进行定位

The auto-placement cursor defines the current “insertion point” in the grid, specified as a pair of row and column grid lines. Initially the auto-placement cursor is set to the start-most row and column lines in the implicit grid.

所以我们的光标是顶部/左侧的单元格，item2 将放置在那里，我们只需按照树的顺序放置所有其他元素:

For each grid item that hasn’t been positioned by the previous steps, in order-modified document order:

当然，没有元素会与已经放置的元素 1 重叠，我们会按照算法为每个元素不断递增光标。

---

现在让我们考虑第一个棘手的情况，唯一的区别是您没有指定grid-row，这将不再使您的元素成为not auto-positioned 一个是因为你只定义了 grid-column 所以该行将被自动定义并且该元素现在将落入步骤 (4) 如果你仔细检查步骤(4)你会发现两个子步骤:

If the item has a definite column position:

If the item has an automatic grid position in both axes:

item1 将考虑第一个，将被放置在第二列并递增光标!。光标的增量是使第二个元素位于其后的原因。

在您的第二个示例中，item1 不会使用光标，因为它在步骤 (1) 中被考虑，因此 item2 将是第一个使用光标的人，这与您的第一个示例不同，在第一个示例中，item1 将是第一个使用它的人。

值得注意的是，在步骤(4)中我们有两种算法。 “稀疏”一个(默认行为)，我们从不重置光标，我们总是增加它，这会产生间隙。在每一步重置光标以填充所有单元格的“密集”算法。要激活“密集”算法，您需要考虑 grid-auto-flow

.container {
  display: grid;
  margin: 40px;
  grid-gap: 20px;
  text-align: center;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: dense;
}

.container div {
  background: #ff8000;
}

.container .item1 {
  grid-column: 2/4;
}

<div class="container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

dense

If specified, the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

If omitted, a “sparse” algorithm is used, where the placement algorithm only ever moves “forward” in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear “in order”, even if this leaves holes that could have been filled by later item ^ref

---

使用相同算法解释的另一个非直觉行为的相关问题:CSS Grid : How Auto placement algorithm works