方形空间中的图像砌体网格

Question

如何制作只有 4 个图像的砌体网格，并且总是看起来像 this？

我需要这种对齐方式在每个屏幕尺寸上都相同，并且始终形成一个正方形。这可能吗？我尝试了很多不同的方法，但似乎都不适用于所有屏幕尺寸。

Answer 1

Masonry 专为动态布局而设计。您可能应该使用更适合静态网格的东西，例如 CSS Grid。

根据您自己的答案，我制作了一个更通用的版本。它使用容器宽度作为纵横比。对设备宽度的依赖可能会受到限制。

codepen.io/joeflash/pen/wxdomE

.grid-blocks {
  position: relative;
  margin: 0 auto;
  width: 80%;
  overflow: hidden;
}