CSS网格 - 在布局中使用NXN表的订单

Question

我需要为3个产品制作产品比较表。每个都有一个图像（a），标题（b）和描述（c）。我使用CSS网格创建了此表布局：

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

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

1A
2A
3A
：----：
1B
2B
3B
：----：
1C
2C
3C

小提琴：

.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：

图I

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

用于按组订购DIVS，请使用Flexbox属性 order 。将每个属性应用于html中的inline 样式属性（请参见示例a ）：

图II

  <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，这是针对styleheet或＆lt; style＆gt; 标签的CSS解决方案。 （请参见示例b ）

图III

.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}

如该屏幕截图所示，它按要求的顺序堆叠。

示例一个（内联样式）

.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>