如何实现支持宽图跨两列的CSS Masonry Grid动态布局？

核心思路 #

要实现宽图自动跨两列的瀑布流，需结合CSS Grid布局+动态判断图片宽高比设置跨列规则。原生grid-template-rows: masonry目前仅Firefox支持，不适合生产环境，因此采用兼容方案：

步骤1：搭建基础Grid布局 #

替换你之前的错误Grid配置，用Tailwind或自定义CSS构建两列网格：

<!-- Tailwind 写法 -->
<div class="grid grid-cols-2 gap-4">
  <!-- 图片项容器 -->
</div>

或自定义CSS：

.grid-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  grid-auto-flow: dense; /* 自动填充网格空白区域 */
}

步骤2：动态判断宽高比并设置跨列 #

在Vue中监听图片加载事件，计算宽高比，当宽高比超过阈值（比如1.5，可按需调整）时，给容器添加跨列类：

完整Vue代码示例

<template>
  <div class="grid grid-cols-2 gap-4">
    <div 
      v-for="(imgItem, index) in project.images" 
      :key="index"
      :class="imgItem.aspectRatio > 1.5 ? 'grid-col-span-2' : ''"
    >
      <img 
        class="w-full rounded-xl shadow object-cover" 
        :src="imgItem.url" 
        alt="画廊图片"
        @load="calcAspectRatio($event, index)"
      >
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 模拟图片数据，若后端返回宽高可直接计算，无需监听load事件
const project = ref({
  images: [
    { url: '/path/to/image1.jpg' },
    { url: '/path/to/wide-image.jpg' },
    { url: '/path/to/image2.jpg' }
  ]
})

// 计算图片宽高比
const calcAspectRatio = (e, idx) => {
  const img = e.target
  project.value.images[idx].aspectRatio = img.width / img.height
}
</script>

<style scoped>
/* 不用Tailwind预置类时，自定义跨列样式 */
.grid-col-span-2 {
  grid-column: span 2 / span 2;
}
</style>

关键说明 #

• 若后端接口返回图片宽高参数，直接在数据中计算aspectRatio即可，无需监听load事件，性能更优。
• object-cover用于保证图片填充容器且不变形，可按需替换为object-contain。
• 原生columns-2是多列流式布局，无法实现元素跨列，必须改用CSS Grid。

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