Расположение блоков лесенкой

Question

Задача расположить посты как на странице https://www.net-a-porter.com/en-ua/porter/category/beauty?cm_sp=topnav-_-editorial-_-beauty Пробовал расположить с помощью grid развернув саму сетку по часовой, а элементы против, но таким образом всё поехало. Скажите какие есть способы разместить элементы так как мне нужно?

Answer 1

Обычные отступы в css. WordPress с Woocommerce тут не при чём

.content {
  display: flex;
  flex-direction: row;
}

.content-block {
  margin: 0 15px;
}

.content-block:nth-child(2) {
  padding-top: 20px;
}

.content-block:nth-child(3) {
  padding-top: 40px;
}

<div class="content">
  <div class="content-block content-block">
    <img src="http://via.placeholder.com/200x350" />
  </div>
  <div class="content-block content-block">
    <img src="http://via.placeholder.com/200x350" />
  </div>
  <div class="content-block content-block">
    <img src="http://via.placeholder.com/200x350" />
  </div>
</div>
<div class="content">
  <div class="content-block content-block">
    <img src="http://via.placeholder.com/200x350" />
  </div>
  <div class="content-block content-block">
    <img src="http://via.placeholder.com/200x350" />
  </div>
  <div class="content-block content-block">
    <img src="http://via.placeholder.com/200x350" />
  </div>
</div>

БЛОГ НА HUSL

Расположение блоков лесенкой

Ответы (1 шт):