如何将 CSS 网格包装在列和一定数量的行中，同时遵循逻辑字母顺序？

Question

所以我有一个像这样的网格设置

<div class="grid-container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  ...
  <div>z</div>
</div>

我怎样才能让它出现在两列中，按 4 行高分组。创建这样的安排：

a | e
b | f
c | g
d | h
----- 
i | m
j | n

...

s | w
t | x
----- 
y |
z |

没有将 4 或 8 个 div 分组到单独的网格盒的明显答案。 与使用 div 不同的实现也受欢迎

除了使用字母顺序排序之外，我目前已经半工作了

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(4, auto);
}

.grid-container DIV:nth-child(8n) {
  padding-bottom: 10px;
}

但这不遵守字母顺序，给出：

a | b
c | d
e | f
g | h
-----
i | j

添加

grid-auto-flow: column;

容器会在溢出时添加更多列，而忽略定义的 2 列。

Answer 1

没有办法（据我所知）动态地执行此操作。

以 8 分组并利用

subgrid

是合乎逻辑的。

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  row-gap: 10px;
}

.item {}

.sub {
  display: grid;
  grid-column: span 2;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: subgrid;
  grid-auto-flow: column;
}

<div class="grid-container">
  <div class="sub">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
  <div class="sub">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>

  <div class="sub">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>

</div>