Как сделать вывод постов Wordpress в виде неправильной сетки?

Question

[Suil]

Добрый день.

Не знаю как это называется, возможно masonry.

Как реализовать вывод постов как на примере ниже?
4 блока и почти все разных размеров.



p.s. Как сделать запрос wordpress знаю, тут наверное по стилизации вопрос.

Comments

[Дмитрий]

Подскажите пожалуйста, как всё таки делать запрос для такой сетки?

Answer 1

[EvgenyMorozov]

Посмотрите в сторону гридов

Comments

[Suil]

Спасибо, разобрался.

Вдруг кому пригодится

<div class="grid-container">
  <div class="news "></div>
  <div class="news "></div>
  <div class="news "></div>
  <div class="news "></div>
</div>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}


.news:nth-child(1) { grid-area: 1 / 2 / 2 / 3; }
.news:nth-child(2) { grid-area: 2 / 2 / 3 / 3; }
.news:nth-child(3) { grid-area: 1 / 3 / 3 / 5; }
.news:nth-child(4) { grid-area: 1 / 1 / 3 / 2; }

</style>

Answer 2

[WP Panda]

Добавляете счётчик, делаете деление по модулю на 4, ориентируясь на результат добавляете нужные классы.

Answer 3

[Dmaw]

Сверстать сетку так как вам нужно :)

Answer 4

[Тарас Шульга]

Как сделать вывод постов Wordpress в виде неправильной сетки?

Тут нужно просто заверстать данную сетку. WP вообще по барабану с какой разметкой вы хотите вывести элементы - его заботы вывести конент, а как он уже будет располагаться - это забота css

Answer 5

[Орхан Гасанлы]

Здравствуйте!
Неправильная сетка - Masonry Grid
Готовый набор сниппетов -
https://bootsnipp.com/search?q=Masonry+Grid
Например, https://bootsnipp.com/snippets/a6aDD
https://bootsnipp.com/snippets/Zkk0O

А также существуют готовые плагины. Ищите в гугл wordpress masonry grid

Comments

[Алексей Просто]

А как сам вывод то прописать?

[Орхан Гасанлы]

Алексей Просто, к сожалению, уже давно не занимаюсь ВП, но суть в следующем - можно по-разному вывести посты в виде сетки.
1) устанавливаете счетчик вне цикла ВП, внутри инкрементируете значение и для определенных постов внутри цикла применяете необходимый стиль.
2) другое решение - это использовать css стили ( :nth-child() ).
Первый вариант, как по мне, более предпочтителен