Grid или Flex -сетка с разными условными margin-top и margin-bottom для колонок?

Question

[Дарья]

Есть следующий макет, существует ли способ создать общий грид или флекс, а не делить левую и правую колонки на отдельные секции? Как это грамотно реализовать?


Условно:

<div class="cards">
    <div>
      <img src="" alt="" />
      <h2></h2>
      <p></p>
    </div> * 4
  </div>

.cards {
display: grid;
???????
}

Comments

[Ankhena]

Есть следующий макет, существует ли способ создать общий грид или флекс

Флексами со сдвигом (марджин или трансформ)
Гридами и span 2 и просто пропустить первую ячейку.

Answer 1

[xdevelx]

.cards > div:nth-child(2n) {
  transform: translateY(-40px);
/*   либо */
/*   margin: -40px 0 40px; */
}

https://codepen.io/xdevelx/pen/mybBWWd

Comments

[Дарья]

Спасибо большое!!