CSS网格布局中列的反向顺序 [英] Reverse order of columns in CSS Grid Layout

问题描述

我希望使用CSS Grid来颠倒两个并排div的明显顺序，其中一个div任意增长(我不想使用浮点数).

I was hoping to use CSS Grid to reverse the apparent order of two side-by-side divs, where one of the divs grows arbitrarily (I don't want to use floats).

我在这里创建了一个插件: http://plnkr.co/edit/6WZBnHbwhD7Sjx2ovCO7? p =预览

I've created a plunkr here: 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会偏移到新行，因此看起来更像:

The crux of it is that when I have the .reverse class applied (so that you should see B | A), B is offset to a new line so it looks more like:

          | A
B

如果我用.b反转.a的文档顺序，这可以恢复正常(但是，如果我放下.reverse类，也会遇到同样的问题).

If I invert the document ordering of .a with .b, this goes back to normal (but of course, if I drop the .reverse class, I get the same problem).

这是为什么，我该如何解决?

Why is this, and how can I address?

推荐答案

当网格自动放置算法在容器中布置项目时，它使用下一个可用空单元格(

As the Grid auto-placement algorithm lays out items in the container, it uses next available empty cells (source).

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

In your source code the A element comes before the B element:

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

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

Therefore, the grid container first places A, then uses the next available space to place B.

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

By default, the auto-placement algorithm looks linearly through the grid without backtracking; if it has to skip some empty spaces to place a larger item, it will not return to fill those spaces. To change this behavior, specify the dense keyword in grid-auto-flow.

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

---

grid-auto-flow: dense

解决此问题的一种方法(如您所指出的， )是使用grid-auto-flow: dense覆盖默认的grid-auto-flow: row

---

grid-auto-flow: dense

One solution to this problem (as you have noted) is to override the default grid-auto-flow: row with grid-auto-flow: dense.

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

With grid-auto-flow: dense, the Grid auto-placement algorithm will look to back-fill unoccupied cells with items that fit.

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

7.7.自动放置:grid-auto-flow 财产

未明确放置的网格项目将自动放入 自动放置在网格容器中的空闲空间 算法.

Grid items that aren’t explicitly placed are automatically placed into an unoccupied space in the grid container by the auto-placement algorithm.

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

grid-auto-flow controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

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.

#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>

另一种解决方案是简单地为第二项定义行.

Another solution would be to simply define the row for the second item.

#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>

这篇关于CSS网格布局中列的反向顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！