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

[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




Решение должно работать с любым количеством элементов сетки и должно использовать Auto-fit (количество столбцов неизвестно и зависит от доступной ширины).
Я упростил код, но в реальности в этой жизни в пределах @p> loop loop ​​ loop
loop
. 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