如何更改网格的订单方向？

Question

我有这样的网格；

我想从上到下而不是从左到右订购数字。 （我想在最后一栏看到布鲁斯）

.grid {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(3, calc((100% / 3) - calc(2em / 3)));
  grid-auto-flow: row;
}

这里是游乐场； https://codesandbox.io/s/tender-framework-r30gy?fontsize=14

我该怎么做？

Answer 1

如果我的问题正确，那么您需要每第12项，并在新行中进一步进行。我会尝试为所有项目提供相同的类，并将nth-child(12n)与grid-column-start: 1;一起使用。

.grid-item-device-type-1:nth-child(12n) {
  /* height: 180px; */
  /* min-width: 320px; */
  grid-column-start: 1;

}

希望它会有所帮助：）

Answer 2

类似的事情可以解决问题。

请记住，使用CSS对这样的元素重新排序并不是支持屏幕阅读器的最佳选择。

.item1 { grid-area: 1 / 1; }
.item2 { grid-area: 2 / 1; }
.item3 { grid-area: 3 / 1; }
.item4 { grid-area: 4 / 1; }
.item5 { grid-area: 5 / 1; }
.item6 { grid-area: 1 / 2; }
.item7 { grid-area: 2 / 2; }
.item8 { grid-area: 3 / 2; }
.item9 { grid-area: 4 / 2; }
.item10 { grid-area: 5 / 2; }
.item11 { grid-area: 1 / 3; }
.item1b { grid-area: 2 / 3; }
.item2b { grid-area: 3 / 3; }
.item3b { grid-area: 4 / 3; }