How to wrap a css grid in both column and a certain amount of rows, while following logical alphabetical order?

So i have a grid setup like this

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

How can i make it appear in two columns, grouped in rows of say 4 high. Creating an arrangement like this:

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

...

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

Without the obvious answer of grouping 4 or 8 divs to a separate gridbox. Implementations that differ from using divs are welcome too

I currently got it semi working except for the alphabetical sorting by using

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

But that does not honor the alphabetical order, giving this:

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

Adding

grid-auto-flow: column;

to the container makes it add more columns on overflow, disregarding the defined 2 columns.

Solution

You have a pattern that repeats each 8 elements so:

.grid-container {
  display: grid;
  gap: 5px;
  justify-content: start;
  grid-auto-flow: dense;
}
.grid-container :nth-child(8n + 1),
.grid-container :nth-child(8n + 2),
.grid-container :nth-child(8n + 3),
.grid-container :nth-child(8n + 4) {
  grid-column: 1;
}
.grid-container :nth-child(8n + 5),
.grid-container :nth-child(8n + 6),
.grid-container :nth-child(8n + 7),
.grid-container :nth-child(8n + 8) {
  grid-column: 2;
}

.grid-container :nth-child(8n + 8) {
  margin-bottom: 5px;
}

<div class="grid-container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>i</div>
  <div>j</div>
  <div>k</div>
  <div>l</div>
  <div>m</div>
  <div>n</div>
  <div>o</div>
  <div>p</div>
  <div>q</div>
  <div>r</div>
</div>

And with some optimization:

.grid-container {
  display: grid;
  gap: 5px;
  justify-content: start;
  grid-auto-flow: dense;
}
.grid-container > * {
  grid-column: 1;
}
.grid-container :is(:nth-child(8n + 5),:nth-child(8n + 6),:nth-child(8n + 7),:nth-child(8n)) {
  grid-column: 2;
}

.grid-container :nth-child(8n) {
  margin-bottom: 5px;
}

<div class="grid-container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>i</div>
  <div>j</div>
  <div>k</div>
  <div>l</div>
  <div>m</div>
  <div>n</div>
  <div>o</div>
  <div>p</div>
  <div>q</div>
  <div>r</div>
</div>