Как оформить вывод постов в виде сеток [GRID CSS]?

Question

[Артём Буханец]

В самом цикле вывода постов мы стилизируем один пост. Но к примеру мы выводим на страницу 10 постов в цикле. как стилизовать каждый пост отдельно? что бы была выстроена к примеру такая сетка на гридах:

Comments

[Алан Гибизов]

А как вы пробовали?

[Артём Буханец]

Алан Гибизов, просто на флексах

[Алан Гибизов]

Артём Буханец, рекомендую показать код своих попыток (лучше всего через codepen и в редакторе тут есть плюсик, через него встраивается).
Показать надо по трем причинам:
первая это п.5.12 Регламента.
вторая - направление вашей мысли
третья - на код проще опираться, даже если будет использоваться другой фреймворк или библиотека

[Артём Буханец]

Алан Гибизов,

.container-grid {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
 

article.post-grid {
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}

кажется у меня получилось

[Артём Буханец]

Алан Гибизов, спасибо за отклик)

[Ankhena]

Артём Буханец, прекрасный грид.
Теперь через nth-child задавайте размеры карточкам типа span 2

[Алан Гибизов]

Артём Буханец, фрагменты кода надо оборачивать тэгом code для корректного отображения.

[Артём Буханец]

Ankhena, К примеру article.post-grid:nth-child(odd) {} что я должен им задать?

[Ankhena]

Артём Буханец,
например,

grid-column: span 2
grid-row: span 2

даст вам элемент 2х2 (арбуз)

Вы зря повышаете специфичность селекторов article.post-grid. Думаю, что .post-grid вполне достаточно.
Тем более, если разметка может поменяться, к примеру, с article на li.

[Артём Буханец]

Ankhena, большое спасибо