xdevelx

.grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 20px;
}

.grid > * {
  grid-column: span 3; /* по умолчанию все широкие */
}

.grid > :nth-child(9n + 3),
.grid > :nth-child(9n + 4),
.grid > :nth-child(9n + 8) {
  grid-column: span 2; /* узкие элементы */
}

Можете ещё попробовать 14 колоночную сетку, узкие - 4 колонки, широкие - 5. Или 11 колонок (4 и 3). А вообще такие вещи нужно брать из макета или уточнять у дизайнера, какими флюидами он прочувствовал такие пропорции?

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

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

Вот такой вариант
https://codepen.io/xdevelx/pen/OJEGaoe

grid-aria

нужно grid-area https://developer.mozilla.org/ru/docs/Web/CSS/grid-area
https://codepen.io/xdevelx/pen/ExKgBMg

Области мне нужны для того, чтобы была возможность их перемещать, а это нужно только для моб. версии.

Для этого определяется grid-template-areas, а в медиа запросах grid-template-areas переопределяется
Пример: https://codepen.io/rachelandrew/pen/waVBpK