Измените количество столбцов и строк в сетке по мере увеличения количества элементов. ⇐ CSS

[Anonymous]

Мне нужно создать адаптивную сетку.

Сетка должна меняться в зависимости от количества элементов (а не от размера экрана).

От 5 до 6 предметов должно быть 2х3,

от 7 до 9 предметов должно быть 3х3,

от 10 до 12 предметов должно быть 3х4,

от От 13 до 16 элементов должны иметь размер 4x4,
и так далее...

Можно ли это сделать с помощью CSS Grid?




Это это то, что я пробовал:




























main {
/* display: flex; */
/* flex-wrap: wrap; */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
align-content: stretch;
height: 100vh;
}
figure {
margin: 0;
/* flex-grow: 1; */
/* flex-basis: 12rem; */
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}


Подробнее здесь: https://stackoverflow.com/questions/611 ... s-increase