CSS Grid - 在布局中使用 NxN 表的顺序

Question

我需要为 3 种产品制作产品比较表。每个都有图像 (a)、标题 (b) 和描述 (c)。我使用 CSS Grid 创建了这个表格布局：

1a	1b	1c
2a	2b	2c
3a	3b	3c

所以所有这些条目都在单独的div 单元格中。这在桌面上很好。在移动设备上，我需要它：

1a
2a
3a
:----:
1b
2b
3b
:----:
1c
2c
3c

小提琴：https://jsfiddle.net/0ymv1utL/

.container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto auto;
  grid-auto-columns: 1fr;
  grid-gap: 5px;
}

.container > div {
  border: 1px solid red;
}

@media screen and (max-width: 768px) {
  /* .container {
     grid-auto-flow: row; 
   } */
}

<div class="container">
  <div class="item">1a</div>

  <div class="item">1b</div>

  <div class="item">1c</div>

  <div class="item">2a</div>

  <div class="item">2b</div>

  <div class="item">2c</div>

  <div class="item">3a</div>

  <div class="item">3b</div>

  <div class="item">3c</div>
</div>

有没有办法用给定的 HTML 破解这种结构？任何线索表示赞赏。

Answer 1

对于媒体查询，您使用 flexbox：

图一

@media screen and (max-width: 768px) {
  .container {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
  }
}

要按组对 div 进行排序，请使用 flexbox 属性 order。将每一项应用到 HTML 中的内联 style 属性（参见示例 A）：

图二

  <div class="item" style='order: 1'>1a</div>

  <div class="item" style='order: 4'>1b</div>

  <div class="item" style='order: 7'>1c</div>
<!--:
    :
    :-->
</section>

如果您不希望任何内联样式破坏您的 HTML，这里有一个样式表或 <style> 标记的 CSS 解决方案。 （参见示例 B）

图三

.item:first-of-type {order:1}
.item:first-of-type + .item + .item + .item {order:2}
.item:first-of-type + .item + .item + .item + .item + .item + .item {order:3}
.item:nth-of-type(2) {order:4}
.item:nth-of-type(2) + .item + .item + .item {order:5}
.item:nth-of-type(2) + .item + .item + .item + .item + .item + .item {order:6}
.item:nth-of-type(3) {order:7}
.item:nth-of-type(3) + .item + .item + .item {order:8}
.item:nth-of-type(3) + .item + .item + .item + .item + .item + .item {order:9}

如此屏幕截图所示，它按 OP 请求的顺序堆叠。

示例 A（内联样式）

.container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto auto;
  grid-auto-columns: 1fr;
  grid-gap: 5px;
}

.item {
  border: 1px solid red;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .container {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
  }
}

<section class="container">

  <div class="item" style='order: 1'>1a</div>

  <div class="item" style='order: 4'>1b</div>

  <div class="item" style='order: 7'>1c</div>

  <div class="item" style='order: 2'>2a</div>

  <div class="item" style='order: 5'>2b</div>

  <div class="item" style='order: 8'>2c</div>

  <div class="item" style='order: 3'>3a</div>

  <div class="item" style='order: 6'>3b</div>

  <div class="item" style='order: 9'>3c</div>

</section>

示例 B（样式表）

.container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto auto;
  grid-auto-columns: 1fr;
  grid-gap: 5px;
}

.item {
  border: 1px solid red;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .container {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
  }
}

.item:first-of-type {order:1}
.item:first-of-type + .item + .item + .item {order:2}
.item:first-of-type + .item + .item + .item + .item + .item + .item {order:3}
.item:nth-of-type(2) {order:4}
.item:nth-of-type(2) + .item + .item + .item {order:5}
.item:nth-of-type(2) + .item + .item + .item + .item + .item + .item {order:6}
.item:nth-of-type(3) {order:7}
.item:nth-of-type(3) + .item + .item + .item {order:8}
.item:nth-of-type(3) + .item + .item + .item + .item + .item + .item {order:9}

<section class="container">

  <div class="item">1a</div>

  <div class="item">1b</div>

  <div class="item">1c</div>

  <div class="item">2a</div>

  <div class="item">2b</div>

  <div class="item">2c</div>

  <div class="item">3a</div>

  <div class="item">3b</div>

  <div class="item">3c</div>

</section>