RAX7

.wrapper {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.box:nth-child(6n + 1),
.box:nth-child(6n + 6) {
  grid-row: span 2;
}

.box:nth-child(6n + 5) {
  grid-column: 1;
}

.grid {
    display: grid;
    gap: 15px;
    grid-template-columns: 475px 180px 475px;
    justify-content: center;
}
 
.grid__item {
    background-color: #000;
    height: 320px;
}

.grid__item:nth-child(odd) {
  grid-column-end: span 2;
}

.grid__item:nth-last-child(-n + 2) {
  grid-column: 1 / span 1;
}

.grid__item:nth-last-child(-n + 1) {
  grid-column: 2 / span 2;
}

https://masonry.desandro.com/methods.html#layout-m...

(function ($) {
  var $container = $(".masonry-container");
  $container.imagesLoaded(function () {
    $container.masonry({
      columnWidth: ".card",
      itemSelector: ".card"
    });
  });

  $(".more").click(function () {
    $(this).siblings(".moreDetal").toggle(0);
    $container.masonry("layout");
  });
})(jQuery);

Примерно так

Еще один вариант. Без фиксированной высоты родителя, но количество дочерних элементов в левой или в правой колонке жестко фиксировано. Возможно разумней было бы не костылить в css nth-child, а навешать классы нужным элементам.

transition для гридов пока что работает только в файрфоксе, кроссбраузерно можно сделать на js