Masonry.js: масштабирование элементов сетки с разной высотой

Question

Я пытаюсь выяснить, могу ли я использовать Masonry.js / Isotope.js для отображения сетки изображений и увеличения их при нажатии.На странице кирпичной кладки есть учебное пособие о том, как это сделать для элементов с фиксированной высотой (https://masonry.desandro.com/extras.html#animating-item-size).. Я пытаюсь сделать это со случайными изображениями. В основном, я хотел бы иметь сочетание ландшафта и портрета.фотографии в 4-колоночном макете и клик должны увеличить до полной ширины.

Я построил это перо для иллюстрации (на основе примера кода): https://codepen.io/anon/pen/NmxYxb

Хотя этоработает, это довольно уродливо, потому что сначала масштабируется по горизонтали, а по вертикали - как второй шаг. Не уверен, как это сделать одновременно, как пример с фиксированной высотой.

css:

.grid-item,
.grid-sizer {
  width: 25%;
}

.grid-item {
  float: left;
  min-height: 100px;
}

/* grid-item-content is visible, and transitions size */
.grid-item-content {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
}


/* both item and item content change size */
.grid-item.is-expanded {
  width: 100%;
  min-height: 200px;
  max-height: 10vh;
  z-index: 2;
}

html:

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">
      <img src="https://picsum.photos/300/200/?random" class="grid-item-content">
  </div>

js:

// external js: masonry.pkgd.js, classie.js

var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

grid.addEventListener( 'click', function( event ) {
  // don't proceed if item content was not clicked on
  if ( !matchesSelector( event.target, '.grid-item-content' )  ) {
    return;
  }
  var itemContent = event.target;
  setItemContentPixelSize( itemContent );

  var itemElem = itemContent.parentNode;
  itemElem.classList.toggle('is-expanded');

  // force redraw
  var redraw = itemContent.offsetWidth;
  // renable default transition
  itemContent.style[ transitionProp ] = '';

  addTransitionListener( itemContent );
  setItemContentTransitionSize( itemContent, itemElem );

  msnry.layout();
});

var docElem = document.documentElement;
var transitionProp = typeof docElem.style.transition == 'string' ?
    'transition' : 'WebkitTransition';
var transitionEndEvent = {
  WebkitTransition: 'webkitTransitionEnd',
  transition: 'transitionend'
}[ transitionProp ];

function setItemContentPixelSize( itemContent ) {
  var previousContentSize = getSize( itemContent );
  // disable transition
  itemContent.style[ transitionProp ] = 'none';
  // set current size in pixels
  itemContent.style.width = previousContentSize.width + 'px';
  itemContent.style.height = previousContentSize.height + 'px';
}

function addTransitionListener( itemContent ) {
  // reset 100%/100% sizing after transition end
  var onTransitionEnd = function() {
    itemContent.style.width = '';
    itemContent.style.height = '';
    itemContent.removeEventListener( transitionEndEvent, onTransitionEnd, false );
  };
  itemContent.addEventListener( transitionEndEvent, onTransitionEnd, false );
}

function setItemContentTransitionSize( itemContent, itemElem ) {
  // set new size
  var size = getSize( itemElem );
  itemContent.style.width = size.width + 'px';
  itemContent.style.height = size.height + 'px';
}

window.onload = function(e) {
  msnry.layout();
};