Any way to make CSS flex flow downward while having multiple columns?

Question

I have the following flex component:

ul {
  display: flex;
  flex-direction: row;
  gap: 8px 32px;
    flex-wrap: wrap;
}

li {
flex-basis: calc(33% - 32px);
}

<ul>
    <li>Toni and Dwight Beavers</li>
    <li>Debra Coleman</li>
    <li>Ashley Dwight</li>
    <li>Paul and Madeline Green</li>
    <li>Jon and Allison Kelly</li>
    <li>Samar and William Longjohnson</li>
    <li>J. May Liang and James Linament</li>
    <li>Timothy R. Landry</li>
    <li>Carrie and David Mason</li>
    <li>Luke Frazier and Robert Peters</li>
    <li>Mei Xu and Allessandro Reiner</li>
    <li>Jennifer and Jimmy Revesi</li>
    <li>Cinthia and Horacio Rozalyn</li>
    <li>Margarita Arroyave-Wessel and David Wemmer, MD</li>
    <li>Angela and Kyle Westberger</li>
    <li>Linda D. Rabbitt and John Wheaton</li>
    <li>Kathie and Mike Wiener</li>
    <li>Rochdi Young</li>
</ul>

It looks the way it should but it flows left to right, and the client wants it to flow down, so that it's alphabetized downward per column.

I tried to do this with column:3.

ul {
columns: 3
}

li {
padding-bottom: 8px;
padding-right: 32px
}

<ul>
        <li>Toni and Dwight Beavers</li>
        <li>Debra Coleman</li>
        <li>Ashley Dwight</li>
        <li>Paul and Madeline Green</li>
        <li>Jon and Allison Kelly</li>
        <li>Samar and William Longjohnson</li>
        <li>J. May Liang and James Linament</li>
        <li>Timothy R. Landry</li>
        <li>Carrie and David Mason</li>
        <li>Luke Frazier and Robert Peters</li>
        <li>Mei Xu and Allessandro Reiner</li>
        <li>Jennifer and Jimmy Revesi</li>
        <li>Cinthia and Horacio Rozalyn</li>
        <li>Margarita Arroyave-Wessel and David Wemmer, MD</li>
        <li>Angela and Kyle Westberger</li>
        <li>Linda D. Rabbitt and John Wheaton</li>
        <li>Kathie and Mike Wiener</li>
        <li>Rochdi Young</li>
    </ul>

This sorts them in the right order, but there are no longer defined rows, and the elements are not aligned horizontally as they were with flex.

Is there any way to get both? Whether with flex, column, or grid, I just want to have it look the same as it does with flex (aligned rows, all elements are balanced in a grid-like appearance) but flow down the columns instead of across. Like the picture below, which I manually achieved by hardcoding a height onto each li element

Answer 1

CSS-Grid can manage that with a defined number of rows.

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, 1fr);
}

li {
  padding: .25em;
  border: 1px solid grey;
  margin-bottom: .25em;
}

<ul>
  <li>Toni and Dwight Beavers</li>
  <li>Debra Coleman</li>
  <li>Ashley Dwight</li>
  <li>Paul and Madeline Green</li>
  <li>Jon and Allison Kelly</li>
  <li>Samar and William Longjohnson</li>
  <li>J. May Liang and James Linament</li>
  <li>Timothy R. Landry</li>
  <li>Carrie and David Mason</li>
  <li>Luke Frazier and Robert Peters</li>
  <li>Mei Xu and Allessandro Reiner</li>
  <li>Jennifer and Jimmy Revesi</li>
  <li>Cinthia and Horacio Rozalyn</li>
  <li>Margarita Arroyave-Wessel and David Wemmer, MD</li>
  <li>Angela and Kyle Westberger</li>
  <li>Linda D. Rabbitt and John Wheaton</li>
  <li>Kathie and Mike Wiener</li>
  <li>Rochdi Young</li>
</ul>