Как создать данную сетку?

Question

[Gumper]

У меня возникла такая проблема, с тем что каждый ряд сетки должен иметь разное количество столбцов:

Но так как неизвестно количество элементов, нельзя сделать просто отельные дивы.
Поэтому желательно html оставить таким:

<ul>
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
</ul>

Answer 1

[RAX7]

Примерно так

Comments

[Gumper]

Огромное спасибо, ты гений✨

[Антон Литвиненко]

Интересно, на флексах реально? Я пока не придумал

[RAX7]

Антон Литвиненко, так в примере есть вариант и на гридах, и на флексах. На флексах даже лучше получилось, на них последний ряд можно выровнять по центру.

[Антон Литвиненко]

RAX7, сорян, с мобилки не увидел, но ты конечно крут

Answer 2

[Никита Киселёв]

Используйте flexbox а так же flex-wrap и нужный вам justify-content для контейнера в котором у вас лежат блоки

для контейнера пишете

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; //или любой другой, какой вам покажется лучше
}

Подробнее про flexbox: тык сюда

Comments

[Антон Литвиненко]

Я так думаю задача сделать через один ряд 5 4 5 4 итд и просто то что вы советуете вопроса не решает

[Gumper]

Антон Литвиненко, да вы правы, спасибо что помогли с объяснением

Answer 3

[Дима Долготер]

ul{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
}