В CSS GRID можно ли использовать столбец сетки-автоподнания, но ограничить его n рядами, прежде чем повторять? ⇐ Html

[Anonymous]

У меня есть эти элементы в сетке: < /p>
01 02 03 04
05 06 07 08
09 10 11 12
< /code>
Мой код выглядит следующим образом: < /p>


.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 150px);
gap: 10px;

& > div {
padding: 5px;
background-color: #ccc;
}
}< /code>

01
02
03
04
05
06
07
08
09
10
11
12
< /code>
< /div>
< /div>
< /p>
Но мне нужно: < /p>
01 03 05 07
02 04 06 08
09 11
10 12
< /code>
Я попробовал это, но без сигары: < /p>


.grid {
display: grid;
grid-auto-flow: column; /* added this line */
grid-template-columns: repeat(auto-fit, 150px);
grid-template-rows: repeat(2, auto); /* added this line */
gap: 10px;

& > div {
padding: 5px;
background-color: #ccc;
}
}< /code>

01
02
03
04
05
06
07
08
09
10
11
12




The solution needs to work with any number of grid items and must use auto-fit (the number of columns is unknown and depends on the available width).
I've simplified the code but in reality this lives within a @for loop within the Angular Framework. < /p>
Это возможно с CSS Grid? Большое спасибо < /p>
edit < /p>
Если ширина устройства только позволяет иметь 2 столбца, он должен выглядеть следующим образом: < /p>
01 03
02 04
05 07
06 08
09 11
10 12


Подробнее здесь: https://stackoverflow.com/questions/795 ... o-n-rows-b