CSS Grid：切换两个特定列的顺序答案

【问题标题】：CSS Grid: Switch two specific columns orderCSS Grid：切换两个特定列的顺序
【发布时间】：2021-03-24 14:50:05
【问题描述】：

我想在桌面上切换网格的第 3 列和第 4 列。

我知道我可以为每个项目分配网格顺序或为两个 div 使用自己的行，然后设置顺序，但我想避免两者以减少代码。

有没有办法通过 css-grid 实现这一点？我愿意通过 css-flex 提供解决方案，如果这样会更容易的话。

我当前的代码如下所示：

.row{
  display: grid;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 1200px) {
  .row{
    grid-template-columns: 1fr 1fr
  }
}

.row div{border:1px solid black}

  <div class="row">
      <div>[IMG]</div>
      <div>Text</div>
      <div>[IMG]</div>
      <div>Text</div>
      <div>[IMG]</div>
      <div>Text</div>
  </div>

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/questions/45367864/…

标签： css css-grid

【解决方案1】：

您可以将order 属性与弹性或网格容器一起使用。如果你不想使用order，你可以像下面这样使用grid-column和grid-row。

.row {
  display: grid;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 1200px) {
  .row {
    grid-template-columns: 1fr 1fr
  }
  .row>div:nth-child(3) {
    grid-column: 2 / 3;
  }
  .row>div:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
}

.row div {
  border: 1px solid black
}

<div class="row">
  <div>[IMG]</div>
  <div>Text</div>
  <div style="background: red">[IMG]</div>
  <div style="background: yellow">Text</div>
  <div>[IMG]</div>
  <div>Text</div>
</div>

【讨论】：

非常感谢。奇迹般有效。我需要再等一会儿才能接受答案:)

【解决方案2】：

你可以像下面这样简单地做

.row{
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow:dense;
}

@media screen and (min-width: 1200px) {
  .row div:nth-child(3) {
     grid-column:2;
  }
}

.row div{border:1px solid black}

<div class="row">
      <div>[IMG]</div>
      <div>Text</div>
      <div>[IMG]</div>
      <div>Text</div>
      <div>[IMG]</div>
      <div>Text</div>
  </div>

【讨论】：