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项属于这条规则：

Position the remaining grid items.

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.

然后

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

Increment the column position of the auto-placement cursor until either this item’s grid area does not overlap any occupied grid cells, or the cursor’s column position, plus the item’s column span, overflow the number of columns in the implicit grid, as determined earlier in this algorithm.

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

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

B会考虑(2)

Process the items locked to a given row.

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

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

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

类似问题：

CSS 网格项目放置

CSS Grid Item Placement

css

css-grid