CSS for variable length list to create new columns at a max count

I have a site that is fetching a list of items. That list can be 0, or up to 20 items, rarely more, the most I've seen is 42. I'm trying to organize them into a div such that if there are more than 10 items in the column, it starts a second column. At 20 items, it would start a third column.
To further complicate things, each item consists of 3 "pieces" (ID, Description, Flag) that I'd like to align with the others in that column.

-------------------List Heading--------------------
ID1   Desc1         Flag1     ID11   Desc11  Flag11
ID2   Decription2   Flag2
...repeat to 10...

-------------------List Heading--------------------
ID1   Desc1         Flag1     ID11   Desc11  Flag11
ID2   Decription2   Flag2
...repeat to 10...

I just saw Kevin's video on Flex versus Grid and thought I had an idea, but using

<div style="display: flex; flex-direction: column; max-height: 100px;">

<div style="display: flex; flex-direction: column; max-height: 100px;">

just shrunk my items. (This will be moved into class/css file after testing). It also didn't contribute to the 3-piece alignment. I can't find anything like a Max-Count or Max-Children. His note at the end indicated

flex-direction:column

flex-direction:column

is a warning sign to look at Grid instead, but all the Grid examples I find insert the children horizontally with 1 & 2 on the top row before going downward. Is there a grid-direction equivalent? I have 2 YOE but CSS isn't my strength, and after seeing that video I'm hoping someone here has some insight to guide me.
Thanks in advance!

MarkBoots•1/4/24, 5:35 PM

if you are using js to fetch the items, you can also assign the column for the item to be in

1cec0ldOP•1/4/24, 6:01 PM

Just found , so that could work if I can get the JS change approved. Not sure right now because I'm only working on the HTML template "can you add a spot to insert this data replacing ---variable--- with the value"

1cec0ldOP•1/4/24, 6:10 PM

Good news, I found something that looks close:

So that gives me the vertical flowing 10 items, now I just need to figure out alignment of the pieces

MarkBoots•1/4/24, 6:15 PM

here my example
unfortunatly the grid will allways fill left to right first (also with auto flow column). So you'll need to assign each item to a column index. with subgrid you can place the subitems. There is some maths involved, but together with js, that shouldnt be a problem
https://codepen.io/MarkBoots/pen/dyrGeKX

CodePenMark Boots

dyrGeKX

...

1cec0ldOP•1/4/24, 6:27 PM

I don't have a CodePen account to share, but thoughts on this?

It seems the only limitation is the fixed width Description column

MarkBoots•1/4/24, 6:31 PM

i was lying, you can totally do it with css and grid/subgrid alone (no fixed widths)
https://codepen.io/MarkBoots/pen/bGZEKqz

CodePenMark Boots

bGZEKqz

...

1cec0ldOP•1/4/24, 6:47 PM

Ooo and that's without the --column-index, I like it!
Thank you!

MarkBoots•1/4/24, 6:54 PM