如何反转 css 网格列的顺序？

Question

我希望能够颠倒列的顺序（2 个小的在左边，大的在右边）。我已经尝试了多种解决方案，但没有找到一种有效的方法。

代码如下：

.images-block-box{

    display: grid;
    grid-gap: 16px;
    grid-template-columns: 708fr 340fr;

    & > div:first-child{
      grid-row: span 2;
    }

    &.reverse{
      grid-template-columns: 340fr 708fr;

      & > div:first-child{
         order: 2; // doesn't work (I want to place the first item at the end of the 3)
      }
    }// reverse

}// images-block-box

请注意，我真的想颠倒列本身的顺序，而不仅仅是它们的尺寸。

Answer 1

那么也许你可以使用不同的方法

.grid {
    display: grid;
    grid-template-columns: 5fr 2fr;
    grid-template-rows: 1fr 1fr;
    height: 500px;
    grid-gap: 2rem;
}

.one {
    background-color: red;
    grid-row: 1 / 3;
}

.two {
    background-color: green;
}

.three {
    background-color: blue;
}

.reverse > .one {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.reverse > .three {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

<h1>Without Reverse</h1>

<div class="grid">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

<h1>With Reverse</h1>


<div class="grid reverse">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

Answer 2

只需调整 grid-column 并考虑 grid-auto-flow:dense; 以允许将下一个元素放在之前：

.grid {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 2fr 1fr;
  grid-auto-flow:dense;
  margin:5px;
}

.grid div {
  min-height: 50px;
  border: 1px solid;
}

.grid div:first-child {
  grid-row: span 2;
}

.grid.reverse {
  grid-template-columns: 1fr 2fr;
}

.grid.reverse div:first-child {
  grid-column:2;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="grid reverse">
  <div></div>
  <div></div>
  <div></div>
</div>

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.^ref

Answer 3

另一种选择是使用 grid-column-end: -1 将大框放置最后一列 - 请参见下面的演示：

.images-block-box {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 708fr 340fr;
  grid-template-rows: 100px 100px;
  grid-auto-flow: column;
}

.images-block-box>div {
  border: 1px solid;
}

.images-block-box>div:first-child {
  grid-row: span 2;
}

.images-block-box.reverse {
  grid-template-columns: 340fr 708fr;
}

.images-block-box.reverse>div:first-child {
  grid-column-end: -1;
}

<div class="images-block-box">
  <div></div>
  <div></div>
  <div></div>
</div>
<br/>
<div class="images-block-box reverse">
  <div></div>
  <div></div>
  <div></div>
</div>

grid-column-end

<integer> && <custom-ident>?

Contributes the nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

Answer 4

因为有 2 个答案可以标记为已接受（感谢@kukkuz 和@Temani Afif），我在这里发布一个总结。目前指出的工作技巧有：

grid-auto-flow: dense (container) + grid-column: 2 (first-child)
grid-auto-flow: column (container) + grid-column-end: -1 (first-child)

其余代码保持不变。请看相关回答

两者目前都运行良好（至少在 major/modern 浏览器中）。

如何反转 css 网格列的顺序？

How to reverse the css grid columns order?

html

css

css-grid

responsive