CSS（网格）：在没有模板区域的情况下动态地在移动设备上重新排序 col 元素

Question

我正在尝试在移动设备上动态更改<div> 的顺序，而无需使用特定类对每个<div> 进行硬编码，然后使用grid-template-areas 进行组织。

我现在拥有的：

<div class="grid-container">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="e"></div>
  <div class="f"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(min-content, max-content);
  grid-template-areas:  "a b"
                        "c d"
                        "e f";

  .a { grid-area: a; }
  .b { grid-area: b; }
  .c { grid-area: c; }
  .d { grid-area: d; }
  .e { grid-area: e; }
  .f { grid-area: f; }

  @media (max-width: 960px) {
      grid-template-columns: 1fr;
      grid-template-areas:  "a"
                            "c"
                            "e"

                            "b"
                            "d"
                            "f";
  }
}

问题在于，每次我需要一个新的“行”时，我都需要将新的grid-area 属性分配给相应的列<div> 并更新CSS 文件中的template-areas。

如果我添加新行，我必须做的示例：

<div class="grid-container">
  ...
  <div class="g"></div>
  <div class="h"></div>
</div>

.grid-container {
  ...
  grid-template-areas:  "a b"
                        "c d"
                        "e f"
                        "g h"; // NEW

  ...
  .g { grid-area: g; } // NEW
  .h { grid-area: h; } // NEW

  @media (max-width: 960px) {
      ...
      grid-template-areas:  "a"
                            "c"
                            "e"
                            "g"

                            "b"
                            "d"
                            "f"  // NEW
                            "h"; // NEW
  }
}

如您所见，这（显然）不是一个很好的解决方案，因为该行将由一组数据填充，所以我不知道会有多少行。

有没有办法动态实现这一点？ :s #beMyHero

Answer 1

我不确定我理解你的意思。

如果要分成两部分，可以使用order & nth-child

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  @media (max-width: 960px) {
      grid-template-columns: 1fr;
      > div:nth-child(2n) {
        order: 1;
      }
  }
}