如何按列拆分 css flex/grid 布局以进行响应式设计

Question

我找到了一个老式的 html table方法，它最好地描述了我的问题和可能的解决方案：

https://stackoverflow.com/a/25010234/2797243

我如何在更现代的 CSS 的基础上实现相同的目标？

要实现的目标的示例：

当前标记如下所示，但可以轻松调整：

<div>A</div>
<div>a</div>
<div>B</div>
<div>b</div>
...

Answer 1

使用display: grid解决方案：

<div class="faux-table">
  <div class="column">
    <div class="cell-header">A</div>
    <div class="cell-content">a</div>
  </div>
  <div class="column">
    <div class="cell-header">B</div>
    <div class="cell-content">b</div>
  </div>
  ...
</div>

/* Mobile and up */
.faux-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Tablet and up */
@media screen and (min-width: 48em) {
  .faux-table {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop and up */
@media screen and (min-width: 64em) {
  .faux-table {
    grid-template-columns: repeat(6, 1fr);
  }
}

见代码笔：

https://codepen.io/maqam7/pen/eYWGwpv

上面的代码在行动：