CSS网格：无需模板区域即可在移动设备上动态重新排序col元素

如何解决CSS网格：无需模板区域即可在移动设备上动态重新排序col元素

我试图在移动设备上动态更改<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属性分配给相应的col <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

解决方法

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

如果要分为两部分，可以使用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;
      }
  }
}