带有网格模板区域的响应式表格

Question

我有这个表格按照我想要的方式工作，使用

grid-template-areas

，在较小的屏幕上折叠列，但我想知道是否有比我目前拥有的更好的CSS方法？

感觉除了为表中的每个新行添加一个新类之外，我还缺少一个更好的解决方案。

Codepen 示例让它按照我想要的方式工作，在小于 800px 的屏幕上使用 2 列：https://codepen.io/BigProof/pen/gOEzeJv

大屏幕：

H1 H2 H3 H4
T1 T2 T3 T4
T11 T22 T33 T44

较小的屏幕：

H1 H2
T1 T2
T11 T22
H3 H4
T3 T4
T33 T44

CSS 示例：

.H1 {
  grid-area: H1;
}
.H2 {
  grid-area: H2;
}
.H3 {
  grid-area: H3;
}
.H4 {
  grid-area: H4;
}
.T1 {
  grid-area: T1;
}
.T11 {
  grid-area: T11;
}
.T2 {
  grid-area: T2;
}
.T22 {
  grid-area: T22;
}
{...}

编辑：更新代码

Answer 1

一种方法是更改 HTML，使其自然地按行流动（对于更广泛的情况），然后在两列情况下，在必要时明确将项目放入正确的行中。

<style>
  body {
    background-color: #15202b
  }
  
  .grid {
    color: #eee;
    display: grid;
    grid-gap: 6px;
    background-color: #224263;
    padding: 6px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100vw;
  }
  
  .grid>div {
    background-color: #15202b;
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
  }
  
  .Heading {
    font-weight: 900;
    text-transform: uppercase;
  }
  
  @media (max-width: 800px) {
    .grid {
      grid-template-columns: 1fr 1fr;
    }
    .grid :nth-child(3),
    .grid :nth-child(4) {
      grid-row: 5;
    }
    .grid :nth-child(7),
    .grid :nth-child(8) {
      grid-row: 6;
    }
    .grid :nth-child(11),
    .grid :nth-child(12) {
      grid-row: 7;
    }
  }
</style>
<div class="grid">
  <div class="Heading">Heading1</div>
  <div class="Heading">Heading2</div>
  <div class="Heading">Heading3</div>
  <div class="Heading">Heading4</div>
  <div>Text1</div>
  <div>Text2</div>
  <div>Text3</div>
  <div>Text4</div>
  <div>Text11</div>
  <div>Text22</div>
  <div>Text33</div>
  <div>Text44</div>
  <div>Text111</div>
  <div>Text222</div>
  <div>Text333</div>
  <div>Text444</div>
</div>