html - 如何反转 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-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