1

I have a situation where number of rows should be 3 and if there are more items it should go to next column. That is each column should only have three items

I did like this

.sub-options-container {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(3, auto);
}

But this will only go up to 3 columns, but I wanted it to add dynamically more columns depending on more items added, but each column should only have three rows

I am able to achieve this if I wanted fixed columns and dynamically adding rows by simply only defining columns as shown

.sub-options-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

I cant find a solution in stackoverflow, sorry if this is asked

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Faiz Hameed
  • 488
  • 7
  • 15
  • 1
    almost a duplicate: https://stackoverflow.com/questions/58598575/grid-auto-flow-in-snake-lines/58598708#58598708 .. check the first snippet and stop on the grid definition (no need the nth-chid tricks) – Temani Afif Feb 04 '20 at 11:08
  • `grid-auto-columns:20px; grid-auto-flow:column dense;` is this that makes the difference? – Faiz Hameed Feb 04 '20 at 11:54
  • yes and especially the `grid-auto-flow:column dense;` (you can remove `dense` in your case) – Temani Afif Feb 04 '20 at 12:13

0 Answers0