CSS 网格布局中的列颠倒顺序

Question

我希望使用 CSS Grid 来反转两个并排 div 的明显顺序，其中一个 div 任意增长（我不想使用浮点数）。

我在这里创建了一个 plunkr： http ://plnkr.co/edit/6WZBnHbwhD7Sjx2ovCO7?p=preview

 #container {
  grid-template-columns: 240px 1fr;
  display: grid;
}

.a {
  background: yellow;
}

.b {
  background: blue;
  color: white;
}

#container>.a {
  grid-column: 1;
}

#container>.b {
  grid-column: 2;
}

#container.reverse>.a {
  grid-column: 2;
}

#container.reverse>.b {
  grid-column: 1;
}

 <div id="container" class="reverse" style="width: 800px;">
  <div class="a">A</div>
  <div class="b">B</div>
</div>

关键是当我应用了 .reverse 类时（这样你应该看到 B | A ）， B 它看起来偏移到新行更像：

           | A
B

如果我用 .b 反转 .a 的文档顺序，这会恢复正常（当然，如果我放弃 .reverse 类，我会得到相同的结果问题）。

为什么会这样，我该如何解决？

原文由 Rob 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于 Grid 自动放置算法在容器中布置项目，它使用 下一个可用 的空单元格 ( source )。

在您的源代码中，A 元素位于 B 元素之前：

 <div id="container" class="reverse" style="width: 800px;">
   <div class="a">A</div>
   <div class="b">B</div>
</div>

因此，网格容器首先放置 A，然后使用下一个可用空间放置 B。

默认情况下，自动放置算法通过网格线性查找，无需回溯；如果它必须跳过一些空白空间来放置更大的项目，它不会返回来填充这些空间。要更改此行为，请在 --- 中指定 --- grid-auto-flow dense 关键字。

http://www.w3.org/TR/css3-grid-layout/#common-uses-auto-placement

---

grid-auto-flow: dense

此问题的一种解决方案（ 如您所指出 的）是用 --- 覆盖默认值 grid-auto-flow: row grid-auto-flow: dense 。

使用 grid-auto-flow: dense ，网格自动放置算法将使用适合的项目回填未占用的单元格。

 #container {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-auto-flow: dense; /* NEW */
}

7.7.自动放置： grid-auto-flow 属性

自动放置算法会自动将未显式放置的网格项放置到网格容器中的未占用空间中。

grid-auto-flow 控制自动放置算法的工作方式，准确指定自动放置的项目如何流入网格。

dense

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

 #container {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-auto-flow: dense; /* NEW */
}

.a {
  background: yellow;
}

.b {
  background: blue;
  color: white;
}

#container>.a {
  grid-column: 1;
}

#container>.b {
  grid-column: 2;
}

#container.reverse>.a {
  grid-column: 2;
}

#container.reverse>.b {
  grid-row: 1;
  grid-column: 1;
}

 <div id="container" class="reverse" style="width: 800px;">
  <div class="a">A</div>
  <div class="b">B</div>
</div>

---

grid-row: 1

另一种解决方案是简单地定义第二个项目的行。

 #container>.b {
  grid-column: 2;
  grid-row: 1; /* NEW */
}

 #container {
  display: grid;
  grid-template-columns: 240px 1fr;
}

.a {
  background: yellow;
}

.b {
  background: blue;
  color: white;
}

#container>.a {
  grid-column: 1;
}

#container>.b {
  grid-column: 2;
  grid-row: 1; /* NEW */
}

#container.reverse>.a {
  grid-column: 2;
}

#container.reverse>.b {
  grid-row: 1;
  grid-column: 1;
}

 <div id="container" class="reverse" style="width: 800px;">
  <div class="a">A</div>
  <div class="b">B</div>
</div>

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

最简单的方法是将 order: 1 添加到元素B或 order: -1 添加到元素A中 .reverse

它也是正确的 CSS 而不是 hack-y

原文由 Chris Pink 发布，翻译遵循 CC BY-SA 4.0 许可协议