使用 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，您可以找到完整的算法以及如何识别何时每个项目将被处理，这是了解这两种情况之间差异的关键。

算法的主要步骤是：

1. 生成匿名网格项

2. 定位任何非自动定位的东西。

3. 处理锁定到给定行的项目。

4. 确定隐式网格中的列。

5. 定位剩余的网格项。

让我们从您的最后一个示例开始，您为第一个项目明确定义了grid-colum 和 grid-row，使其成为非自动定位元素，因此我们放在第(1)步。

然后我们将进入步骤（4）来定位剩余的项目

自动放置光标定义网格中的当前“插入点”，指定为一对行和列网格线。最初，自动放置光标设置为隐式网格中最开始的行和列行。

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

对于前面步骤未定位的每个网格项，按顺序修改的文档顺序：

当然，没有项目会与已放置的项目1重叠，我们会按照算法不断增加每个项目的光标。

---

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

如果item有明确的列位置：

如果项目在两个轴上都有自动网格位置：

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>

密集

如果指定，自动放置算法将使用“密集”打包算法，如果稍后出现较小的项目，该算法会尝试在网格中较早地填充孔。这可能会导致项目出现乱序，因为这样做会填补较大项目留下的漏洞。

如果省略，则使用“稀疏”算法，其中放置算法仅在放置项目时在网格中“向前”移动，从不回溯以填充孔。这样可以确保所有自动放置的项目都“按顺序”显示，即使这会留下可能被以后的项目填充的漏洞 ^ref

---

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

Answer 2

把.item1grid-column改成1/3，像这样：

grid-column: 1 / 3;

基本上这意味着它从第 1 列开始并在第 3 列结束。不像在您的示例中那样从第 2 列开始并在第 4 列结束。

.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: 1/3;
    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 3

为什么还要添加 grid-template-column 和 grid-template-row ？当你可以简单地添加justify-items: center;和align-items: center;