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

如果我颠倒的文件排序.a用.b,这又回到了正常(当然,如果我把.reverse班,我得到了同样的问题).

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

Answer 1

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

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

Answer 2

由于网格自动放置算法在容器中布置项目,因此它使用下一个可用的空单元格(源).

在源代码中,A元素位于B元素之前:

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

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

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

^{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>

Answer 3

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

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

Answer 4

我刚才也遇到了同样的问题。我尝试了auto-row-dense，然后将容器父级的方向设置为rtl。有效。

正是这个，在 plunker 链接上，似乎就成功了。

.reverse{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  direction: rtl;
}

Answer 5

虽然上述解决方案适用于此特定示例，但这不是解决您的问题的正确方法。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>