求助：实现特定布局的5图CSS Grid/Tailwind网格布局

布局需求拆解 #

需要实现的5图网格布局结构：

• 第1张图：左上角（行1，列1）
• 第4张图：左下角（行2，列1）
• 第2张图：垂直居中，跨上下两行（行1-2，列2）
• 第3张图：右上角（行1，列3）
• 第5张图：右下角（行2，列3）

解决方案：原生CSS Grid实现 #

代码示例 #

<div class="grid-container">
  <img src="图1地址" alt="图1" class="item-1">
  <img src="图2地址" alt="图2" class="item-2">
  <img src="图3地址" alt="图3" class="item-3">
  <img src="图4地址" alt="图4" class="item-4">
  <img src="图5地址" alt="图5" class="item-5">
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.item-1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.item-2 {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.item-3 {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}

.item-4 {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.item-5 {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

.grid-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

解决方案：Tailwind CSS实现 #

代码示例 #

<div class="grid grid-cols-[1fr_2fr_1fr] grid-rows-[auto_auto] gap-4 w-full max-w-5xl mx-auto">
  <img src="图1地址" alt="图1" class="row-span-1 col-span-1 object-cover w-full h-full rounded">
  <img src="图2地址" alt="图2" class="row-span-2 col-span-1 object-cover w-full h-full rounded">
  <img src="图3地址" alt="图3" class="row-span-1 col-span-1 object-cover w-full h-full rounded">
  <img src="图4地址" alt="图4" class="row-span-1 col-span-1 object-cover w-full h-full rounded">
  <img src="图5地址" alt="图5" class="row-span-1 col-span-1 object-cover w-full h-full rounded">
</div>

关键类说明 #

• grid-cols-[1fr_2fr_1fr]：自定义列宽比例，中间列占2份，两侧各1份
• row-span-2：让第2张图跨2行
• object-cover：保证图片铺满容器且保持比例，避免拉伸变形

注意事项 #

1. 若图片高度不一致，可给网格行设置固定高度（如grid-rows-[300px_300px]）
2. 可根据需求调整列宽比例，修改grid-template-columns（原生CSS）或grid-cols-[...]（Tailwind）的值即可
3. 如需响应式布局，可添加Tailwind响应式前缀，比如md:grid-cols-[1fr_3fr_1fr]

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