CSS 网格项目放置

Question

我试图学习如何在一个非常简单的网格 (grid-template-columns: 1fr 1fr) 上更改列的顺序。答案很简单：将以下规则添加到第二项：grid-row-start: 1; /* grid-row: 1; shortcut also works */。

_________     _________
| A | B | --> | B | A |
---------     ---------

但我不明白为什么会这样。我正在尝试更改列的顺序，但我使用的是行规则？第二项已经在第一行。添加该规则后发生了什么变化？

---

我试图理解它。我重置了网格并将grid-column-start: 1; 添加到第二项。我最终得到了这个网格：

_________
| A |   |      #B { grid-column-start: 1; }
---------
| B |   |
---------

之后，我在第一项添加了grid-column-start: 2;，结果是：

_________
|   | A |      #A { grid-column-start: 2; }
---------      #B { grid-column-start: 1; }
| B |   |
---------

现在，我必须告诉第二个项目从第一行开始：grid-row-start: 1;，我终于得到了我想要的。

_________
| B | A |      #A { grid-column-start: 2; }
---------      #B { grid-column-start: 1; grid-row-start: 1; }

但问题是，我只能保留grid-row-start: 1; 并获得相同的结果！ 为什么？！

---

body {
  background: lightgoldenrodyellow;
}

#content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

h2 {
  text-align: center;
}

.grid {
  display: grid;
  width: 480px;
  height: 240px;
  margin: 4rem auto;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  font-size: 3rem;
}

.column {
  border: black solid 1px;
}

.colorA {
  background: turquoise;
  text-align: center;
}

.colorB {
  background: aliceblue;
  text-align: center;
}

.column3 {
  /* does nothing */
  display: block;
}

.column4 {
  grid-row-start: 1;
}

.column5 {
  /* does nothing */
  display: block; 
}

.column6 {
  grid-column-start: 1;
}

<div id="content">
  
  <div>
    <h2>Original</h2>
    <div class="grid">
      <div class="column colorA column1">A</div>
      <div class="column colorB column2">B</div>
    </div>
  </div>

  <div>
    <h2>Using grid-row-start</h2>
    <div class="grid">
      <div class="column colorA column3">A</div>
      <div class="column colorB column4">B</div>
    </div>
  </div>

  <div>
    <h2>Using grid-column-start</h2>
    <div class="grid">
      <div class="column colorA column5">A</div>
      <div class="column colorB column6">B</div>
    </div>
  </div>
  
</div>

Answer 1

您需要关注the placement algorithm 才能理解这一点：

项目A将属于此规则：

4. 定位剩余的网格项。

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

然后

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

增加自动放置光标的列位置直到该项的网格区域不与任何占用的网格单元重叠，或者光标的列位置加上该项的列跨度，溢出的数量隐式网格中的列，如本算法前面所述。

所以基本上，B 放置在第一列/第一行，然后我们的 光标 将沿着同一行移动，试图找到一个空列来放置 A，而第二列是空的一个。

---

您所描述的内容不正确，因为您假设 A 将放在 B 之前，但事实并非如此。我们首先放置具有明确位置的项目，然后放置剩余的项目，因此如果您设置 #B { grid-row-start: 1; }，则 B 将首先放置。

B 会考虑 (2)

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

而 A 会像前面解释的那样考虑 (4)

---

如果您指定#B { grid-column-start: 1; }，那么两者都将落在 (4) 之下，在这种情况下，A 将被放置在最前面（它是 DOM 中的第一个），并且逻辑上将获得第一行/第一列，然后 B 将被放置在第一列，但由于第一行由 A 填充，因此它将移动到第二行

---

如果两者都指定了grid-column-start，则它们仍被视为在 (4) 内部，我们先放置 A，然后放置 B，但在这里您需要区分“稀疏”和“密集”。第一个将始终增加光标（这就是您将有空格的原因），而第二个将始终重置光标以确保填充尽可能多的区域。

类似问题：

CSS Grid : How Auto placement algorithm works

Using CSS GRID Why Im getting this gap?

How works CSS grid-autoflow?