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

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

在源代码中，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

此问题的一个解决方案（as you have noted）是使用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. Automatic Placement: the grid-auto-flow property

     

未明确放置的网格项会自动放入   通过自动放置在网格容器中的未占用空间   算法

     

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 2

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

     Name       Number
1    Benjoe     001
2    Benjoe     002
3    Benjoe     001

Answer 3

虽然上述解决方案适用于此特定示例，但这不是解决问题的正确方法。 Grid Layout遵循一个CSS属性，名为direction。 direction: rtl将为您提供问题的要求。 all browsers that support 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>

Answer 4

我刚才也遇到了同样的问题。我尝试了自动行密集，然后将容器父级的方向设置为 rtl。成功了。

就这个，在 plunker 链接上，似乎可以解决问题。

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

Answer 5

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

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

According to MDN，此算法会尝试在网格中填充漏洞。

Answer 6

有一种非常简单的CSS方式。只需更改：

direction: rtl; 

网格容器的

。

Answer 7

我发现：我需要应用grid-auto-flow：密集；在容器上：

Answer 8

方孔中的圆钉

请记住，即使您正在使用花哨的“新”网格功能，旧的 flex 布局仍然有效。你可以组合它们，嵌套它们，有时你不得不承认像这样的某些问题可能会更好地解决 flex-direction: row-reverse

但我知道有些人会因此反对我，所以这是另一种使用网格的方式。

使用命名模板区域

您可以使用命名模板区域并在定义中反转它们。

#container 
{
  grid-template-areas: a b;
  grid-template-rows: 240px 1fr;

  display: grid;
}

#container.reverse 
{
  // note the order is flipped for both these properties
  grid-template-areas: b a;
  grid-template-rows: 1fr 240px;
}

.a {
  grid-area: a;
  background: yellow;
}

.b {
  grid-area: b;
  background: blue;
  color: white;
}

Here's an more complex example that uses that technique with media queries

Answer 9

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

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