Question

我正在尝试获取具有CSS网格但没有JS的按类排序的列的div列表。

这是一个HTML示例：

Docker version 17.05.0-ce, build 89658be

所需的输出应如下所示：

<main>
<div class="A">A_1</div>
<div class="A">A_2</div>
<div class="B">B_1</div>
<div class="A">A_3</div>
<div class="D">D_1</div>
<div class="B">B_2</div>
<div class="C">C_1</div>
<div class="A">A_4</div>
<div class="B">B_3</div>
<div class="C">C_2</div>
<div class="A">A_N</div>
<div class="C">C_3</div>
<div class="B">B_4</div>
<div class="C">C_4</div>
<div class="B">B_N</div>
<div class="C">C_N</div>
<div class="D">D_2</div>
<div class="D">D_3</div>
<div class="D">D_4</div>
<div class="D">D_N</div>
</main>

有没有办法做到这一点？我已经尝试过使用网格模板区域，但是要么必须一一指定，要么一列中的项目会彼此重叠。

如果不能通过网格实现，我该怎么办？

谢谢大家！

Answer 1

视觉上可以通过order属性进行管理，但它不是可扩展或动态的。

main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 2em); /* number of rows is required - so not dynamic */
  grid-auto-flow: column;
}

.A {
  order: 1;
}

.B {
  order: 2;
}

.C {
  order: 3;
}

.D {
  order: 4;
}

<main>
  <div class="A">A_1</div>
  <div class="A">A_2</div>
  <div class="B">B_1</div>
  <div class="A">A_3</div>
  <div class="D">D_1</div>
  <div class="B">B_2</div>
  <div class="C">C_1</div>
  <div class="A">A_4</div>
  <div class="B">B_3</div>
  <div class="C">C_2</div>
  <div class="A">A_N</div>
  <div class="C">C_3</div>
  <div class="B">B_4</div>
  <div class="C">C_4</div>
  <div class="B">B_N</div>
  <div class="C">C_N</div>
  <div class="D">D_2</div>
  <div class="D">D_3</div>
  <div class="D">D_4</div>
  <div class="D">D_N</div>
</main>

Answer 2

如果使用flexbox构建网格，并且A，A_1，A_2，A_3项在返回时都是按顺序排列的，则它们是按以下方式返回的（这意味着您不必在它们自己的类中对它们进行排序），我相信您可以在这些商品上使用order属性。而且您必须将父级上的flex-direction属性设置为“列”。

我一起放了一个快速的Codepen，向您展示了这些都将在您进行排序后进行排序。从这里，您需要确定如何设置包含项的样式，并使网格系统在最后一个项处中断。

https://codepen.io/brianespinosa/pen/XBQyyE

使用CSS网格按类订购列中的项目

2 个答案: