3 columns grid (top to bottom) using grid CSS

Question

Ok, here\'s the situation, let\'s say I have a list with unknown number of items, it could be 10 or a 100, and I want to lay them out in 3 columns going top to bottom not le

Answer 1

I don't think this is possible without previously know the number of items that you want to display, for your case you could do this:

ul {
   display: grid;
   grid-auto-flow: column;
   grid-template-rows: repeat(8, 1fr);
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22

But the number of rows have to be defined previously.