使用Tailwind CSS Grid实现多图布局时row-span不生效问题求助

问题描述 #

我尝试用Tailwind CSS创建一个包含多张图片的CSS Grid布局，但遇到了row-span不生效的问题。我希望标记了row-span-4的图片能延伸到第4行，但它们现在只停留在第2行。

目标布局：左侧上下排列两张横向图片（各占2列1行），右侧并排两张纵向图片（各占1列4行）。
当前效果：右侧的纵向图片仅占据前2行，高度与下方的横向图片齐平。

我的代码：

<div class="container grid grid-cols-4 grid-rows-4 gap-4 p-4">

<img src="/img/h1.jpg" class="col-span-2" alt="">
<img src="/img/v1.jpg" class="row-span-4 " alt="">
<img src="/img/v2.jpg" class="row-span-4" alt="">
<img src="/img/h2.jpg" class="col-span-2"alt="">

</div>

问题原因 #

Grid布局默认按DOM元素的顺序自动填充单元格，导致布局逻辑冲突：

1. 第一张横向图占据第1行的1-2列；
2. 两张纵向图依次占据第1行的3、4列，尝试跨4行；
3. 第二张横向图被分配到第2行的1-2列，此时Grid会限制纵向图的高度，使其仅覆盖到第2行，避免与后续单元格的元素重叠。

解决方案 #

方案1：调整DOM元素顺序 #

将纵向图放在DOM最前面，让它们优先占据右侧的4行空间，再放置横向图：

<div class="container grid grid-cols-4 grid-rows-4 gap-4 p-4">
  <!-- 右侧纵向图 -->
  <img src="/img/v1.jpg" class="col-start-3 row-span-4 object-cover h-full w-full" alt="">
  <img src="/img/v2.jpg" class="col-start-4 row-span-4 object-cover h-full w-full" alt="">
  <!-- 左侧横向图 -->
  <img src="/img/h1.jpg" class="col-span-2 row-start-1 object-cover h-full w-full" alt="">
  <img src="/img/h2.jpg" class="col-span-2 row-start-2 object-cover h-full w-full" alt="">
</div>

• col-start-3/col-start-4明确指定纵向图的起始列；
• object-cover h-full w-full确保图片填满单元格，避免拉伸变形。

方案2：明确指定元素的行列位置（不调整DOM顺序） #

通过row-start和col-start强制指定每个元素的布局位置，覆盖Grid的自动填充逻辑：

<div class="container grid grid-cols-4 grid-rows-4 gap-4 p-4">
  <img src="/img/h1.jpg" class="col-span-2 row-start-1 row-span-1 object-cover h-full w-full" alt="">
  <img src="/img/v1.jpg" class="col-start-3 row-start-1 row-span-4 object-cover h-full w-full" alt="">
  <img src="/img/v2.jpg" class="col-start-4 row-start-1 row-span-4 object-cover h-full w-full" alt="">
  <img src="/img/h2.jpg" class="col-span-2 row-start-2 row-span-1 object-cover h-full w-full" alt="">
</div>

• row-start-1让纵向图从第1行开始，确保跨4行的空间不被后续元素挤占；
• row-start-2指定下方横向图从第2行开始布局。

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