React中用CSS Grid实现类Pinterest的动态图片瀑布流

你遇到的核心问题是给图片设置了height: 100%，强制所有图片拉伸至网格行的统一高度，导致无法形成错落排布的瀑布流效果。以下是两种无需为每张图片添加不同类的解决方案：

方案一：CSS Grid Masonry布局（现代浏览器支持） #

利用CSS Grid的实验性masonry行模板属性，自动根据图片高度排布并填充空白：

.gallery{
  max-width: 80vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry; /* 核心属性，实现瀑布流 */
  gap: 10px; /* 可选，添加图片间间距 */
}

.image{
  max-width: 100%; /* 图片自适应列宽 */
  height: auto; /* 保留图片原始宽高比 */
  display: block; /* 移除inline元素默认间距 */
}

该方案无需额外JS，动态加载图片时会自动适配布局，目前Chrome、Firefox等主流现代浏览器均已支持grid-template-rows: masonry。

方案二：CSS多列布局（兼容性更优） #

如果需要兼容更多浏览器，推荐使用CSS多列布局，这是实现瀑布流的经典方案：

.gallery{
  max-width: 80vh;
  column-count: 3; /* 设置列数 */
  column-gap: 10px; /* 列之间的间距 */
}

.image{
  width: 100%; /* 图片填满列宽 */
  height: auto; /* 保留原始宽高比 */
  display: block;
  margin-bottom: 10px; /* 图片垂直间距 */
  break-inside: avoid; /* 防止图片被列分割 */
}

这种纯CSS方案兼容性极佳，所有现代浏览器都支持，动态加载图片时会自动调整布局填充空白，完全符合你的需求。

内容的提问来源于stack exchange，提问作者user2323