正方形中的图像砌体网格 Space

Question

我怎样才能让只有 4 张图像的砌体网格始终看起来像 this？

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

Answer 1

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

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

codepen.io/joeflash/pen/wxdomE

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