Html 反转 CSS 网格布局中列的顺序

Reverse order of columns in CSS Grid Layout

提问by Rob

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).

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

I've created a plunkr here: http://plnkr.co/edit/6WZBnHbwhD7Sjx2ovCO7?p=preview

我在这里创建了一个 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>

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

关键是，当我.reverse应用了类（以便您看到B | A）时，B它会偏移到一个新行，因此它看起来更像：

          | A
B

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

如果我反转.awith的文档顺序.b，这将恢复正常（但当然，如果我放弃.reverse课程，我会遇到同样的问题）。

Why is this, and how can I address?

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

回答by Michael Benjamin

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

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

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

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

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

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

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

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 densekeyword in grid-auto-flow.

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

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

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

---

---

grid-auto-flow: dense

grid-auto-flow: dense

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

此问题的一种解决方案（如您所见）是grid-auto-flow: row使用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.

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

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

7.7. Automatic Placement: the grid-auto-flowproperty

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-flowcontrols 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.

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

grid-row: 1

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>

回答by Jason T Featheringham

While the above solutions work for this specific example, it isn't the proper way to solve your question. There is a CSS property that Grid Layout adheres to called direction. direction: rtlwill give you what the question calls for. It is supported by all browsers that support Grid Layout.

虽然上述解决方案适用于这个特定示例，但它不是解决您的问题的正确方法。有一个 Grid Layout 坚持的 CSS 属性，称为direction. direction: rtl会给你什么问题要求。所有支持 Grid Layout 的浏览器都支持它。

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

#container.reverse {
  direction: rtl;
}

.a {
  background: yellow;
}

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

<h3>direction: unset</h3>
<div id="container">
  <div class="a">A</div>
  <div class="b">B</div>
</div>

<h3>direction: rtl</h3>
<div id="container" class="reverse">
  <div class="a">A</div>
  <div class="b">B</div>
</div>

回答by Angrej Kumar

I'm not sure how to reverse more grid items. But if you have 2 grid items in your grid, you can simply position 2nd grid item using below code.

我不确定如何反转更多的网格项目。但是，如果您的网格中有 2 个网格项，则可以使用以下代码简单地定位第二个网格项。

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

回答by Rob

I found out: I need to apply grid-auto-flow: dense;on the container:

我发现：我需要grid-auto-flow: dense;在容器上申请：

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

According to MDN, this algorithm attempts to fill in holes earlier in the grid.

根据 MDN，该算法尝试在网格中较早地填充空洞。