具有可变行高的水平“砌体”类型布局

Question

我正在尝试使用类似于臭名昭著的“砖石”布局的东西创建一个图片库。我看过很多图书馆和这样做的方法，但没有一个正是我正在寻找的。所有图像的纵横比不同，宽度和高度也不同。

我希望布局与我从 site 中抓取的这张图片相似：

但是，我希望每一行的高度都是可变的，以适应不同的图像尺寸，这与上面具有固定高度的示例不同。画廊还需要受到容器左右两侧（在本例中为视口）的约束。图像不应被裁剪，但可以根据需要制作成大或小，以尽可能无间隙地适合并延伸到容器的右侧。底行的图像将左对齐。我使用 flexbox 和 wrapping 构建了自己的工作版本。这需要对每一行的高度进行大量的反复试验和自定义值，当我觉得代码只是找出所有图像的最佳顺序和布局以及正确的高度时会容易得多。

我该怎么做？

Answer 1

您所追求的那种布局通常称为砖石布局。 CSS 已经有实现这一点的规范（请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout），但到目前为止，Firefox 是唯一一个在标志后面支持它的浏览器。如果您要启用此实验性支持，请转到 Firefox 中的 about:config，并将 layout.css.grid-template-masonry-value.enabled 设置为 true。

如果您想尝试一下，请使用

.container { 
  display: grid; 
  grid-template-columns: masonry; 
  gap: 15px;
}

还要比较 https://caniuse.com/mdn-css_properties_masonry 和 https://caniuse.com/mdn-css_properties_grid-template-rows_masonry。