尝试创建随机样式的图像库

Question

我正在尝试创建一个几乎随机的图像网格，类似于该网站https://evanpjenkins.com，尽管我不确定如何处理该图像的最佳方法

我的第一个直觉是使用Flexbox网格，该网格在单元内部定位，在一定程度上可以工作，但是它仍然基于行，因此我必须设置负边距才能重叠。

<div class="grid-x grid-padding-x grid-padding-y small-up-1 medium-up-2">
  {% for picture in page.images %}
   {% if picture.aspect-ratio == "7-5" %}
   <div class="cell align-self-bottom">

   <div class="grid-x">
    <div class="small-12 medium-6 cell">
     {% assign image = picture.image %}
     <div class="image--7-5" data-interchange="{% include images/interchange-img-small-12-medium-12-cell.html %}"></div>
    </div>
   </div>

   </div>
   {% elsif picture.aspect-ratio == "5-7" %}
   <div class="cell">
   {% assign image = picture.image %}
   <div class="image--5-7" data-interchange="{% include images/interchange-img-small-12-medium-12-cell.html %}"></div>
   </div>
   {% endif %}
  {% endfor %}
</div>