当网格项大于列宽时，如何计算适配的网格宽度？

核心计算逻辑 #

假设父容器宽度为W（可缩放，比如w-full），网格容器与父容器同宽，我们按以下步骤计算：

1. 网格基础参数

   • 列数设为6，因此单列宽度 = W / 6
   • 图片比例为2/3（宽:高），网格容器高度需匹配图片比例：高度 = 图片宽度 * (3/2)，这里图片宽度取2列（大于单列宽），因此高度 = (W/6)*2*(3/2) = W/2

2. 图片宽度设置
   图片宽度设为2列宽度（确保大于单列宽），即：图片宽度 = (W / 6)*2 = W/3

3. 堆叠偏移计算
   每张图片按固定比例的列宽向右偏移，这里取0.75倍单列宽作为偏移步长（可根据视觉需求调整0.5~1之间的数值）：

   • 第1张（最上层）：left = 0
   • 第2张：left = 0.75 * 单列宽度
   • 第3张：left = 1.5 * 单列宽度
   • 第4张：left = 2.25 * 单列宽度
   • 第5张：left = 3 * 单列宽度
   • 第6张：left = 3.75 * 单列宽度

最终可缩放代码 #

<script src="https://cdn.tailwindcss.com"></script>

<div class="w-full max-w-md bg-red-200 p-4">
  <div class="grid grid-cols-6 relative h-[calc(var(--col-width)*2*(3/2))] [--col-width:calc(100%/6)]">
    <!-- 第1张（最上层） -->
    <div class="absolute left-0 w-[calc(var(--col-width)*2)] aspect-[2/3] rounded-sm overflow-hidden z-10">
      <img src="https://www.themoviedb.org/t/p/original/wZp8xcADdOZ0FK6FEEtrKXjjdKJ.jpg" alt="" class="w-full h-full object-cover">
    </div>
    <!-- 第2张 -->
    <div class="absolute left-[calc(var(--col-width)*0.75)] w-[calc(var(--col-width)*2)] aspect-[2/3] rounded-sm overflow-hidden z-9">
      <img src="https://www.themoviedb.org/t/p/original/wZp8xcADdOZ0FK6FEEtrKXjjdKJ.jpg" alt="" class="w-full h-full object-cover">
    </div>
    <!-- 第3张 -->
    <div class="absolute left-[calc(var(--col-width)*1.5)] w-[calc(var(--col-width)*2)] aspect-[2/3] rounded-sm overflow-hidden z-8">
      <img src="https://www.themoviedb.org/t/p/original/wZp8xcADdOZ0FK6FEEtrKXjjdKJ.jpg" alt="" class="w-full h-full object-cover">
    </div>
    <!-- 第4张 -->
    <div class="absolute left-[calc(var(--col-width)*2.25)] w-[calc(var(--col-width)*2)] aspect-[2/3] rounded-sm overflow-hidden z-7">
      <img src="https://www.themoviedb.org/t/p/original/wZp8xcADdOZ0FK6FEEtrKXjjdKJ.jpg" alt="" class="w-full h-full object-cover">
    </div>
    <!-- 第5张 -->
    <div class="absolute left-[calc(var(--col-width)*3)] w-[calc(var(--col-width)*2)] aspect-[2/3] rounded-sm overflow-hidden z-6">
      <img src="https://www.themoviedb.org/t/p/original/wZp8xcADdOZ0FK6FEEtrKXjjdKJ.jpg" alt="" class="w-full h-full object-cover">
    </div>
    <!-- 第6张（最下层） -->
    <div class="absolute left-[calc(var(--col-width)*3.75)] w-[calc(var(--col-width)*2)] aspect-[2/3] rounded-sm overflow-hidden z-5">
      <img src="https://www.themoviedb.org/t/p/original/wZp8xcADdOZ0FK6FEEtrKXjjdKJ.jpg" alt="" class="w-full h-full object-cover">
    </div>
  </div>
</div>

关键说明 #

• 所有尺寸使用基于父容器宽度的百分比计算（通过CSS变量--col-width简化维护），完全支持缩放
• 调整0.75这个偏移系数，可以改变图片堆叠的紧凑程度
• z-index从10到5依次递减，保证上层图片覆盖下层

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