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

Question

我希望能够反转列的顺序（左边的2小，右边的大1）。我尝试了几种解决方案，但没有找到可行的解决方案。

这是代码：

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

稠密

如果指定，自动放置算法将使用“密集”打包算法，如果稍后出现较小的项目，该算法会尝试在网格中尽早填充孔。这可能导致项目出现乱序，这样做会填补较大项目留下的空缺。^参考