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>

密集

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

Answer 2

另一种选择是使用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>?

将第n条网格线贡献给网格   项目的位置。如果给定一个负整数，它将计入   从显式网格的末端开始反转。

Answer 3

由于有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)

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

两者目前都运行良好（至少在主流/现代浏览器中）。

Answer 4

然后也许您可以使用其他方法

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

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

4 个答案: