TailwindCSS：实现多列卡片中跨列与单列图片等高响应布局

要让桌面端跨两列的卡片图片与单列正方形图片高度完全一致，核心是让跨列图片的高度等于单列卡片的宽度（单列图片为正方形，高度与宽度相等）。由于网格列宽是动态响应的，无法用固定比例的aspect-ratio直接实现，可通过以下步骤实现：

• 定义动态列宽变量：在网格容器中计算桌面端的单列宽度，用CSS变量存储，方便跨列容器复用
• 固定单列图片比例：给单列图片容器设置正方形比例，确保高度等于自身宽度
• 同步跨列图片高度：让跨列图片容器的高度等于单列宽度，实现高度对齐
• 统一图片填充方式：用object-cover保证图片在容器内按比例裁剪，填满空间

修改后的完整代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div data-testid="card-row" class="grid md:gap-4 grid-cols-1 md:grid-cols-3 md:[--col-width:calc((100%-2*1rem)/3)]">
  <div
    data-testid="card"
    class="mb-4 grid relative content-start gap-2 lg:gap-4 h-full"
  >
    <a
      class="absolute z-10 inset-0"
      title="Mock title"
      data-testid="content-card-link"
      href="/#"
    ></a>
    <div class="relative md:aspect-square">
      <div class="overflow-hidden h-full">
        <img
          src="https://picsum.photos/id/10/800/800"
          alt="Image description 1"
          width="800"
          height="800"
          class="card-module__image__3of09 block transition ease-in-out object-cover w-full h-full"
          data-testid="content-card-image"
        />
      </div>
    </div>
    <div class="break-words prose">
      <p
        class="m-0 font-base-bold text-xs tracking-wider uppercase text-core mb-2"
        data-testid="content-card-eyebrow"
      >
        Mock Eyebrow
      </p>
      <h5
        class="font-heading m-0 mb-2 font-bold text-2xl"
        data-testid="content-card-title"
      >
        Mock title
      </h5>
    </div>
  </div>
  <div
    data-testid="card"
    class=" mb-4 grid relative content-start col-span-2 gap-2 lg:gap-4 h-full"
  >
    <a
      class="absolute z-10 inset-0"
      title="Mock title"
      data-testid="content-card-link"
      href="/#"
    ></a>
    <div class="relative md:h-[var(--col-width)]">
      <div class="overflow-hidden h-full">
        <img
          src="https://picsum.photos/id/10/800/800"
          alt="Image description 1"
          width="800"
          height="800"
          class="card-module__image__3of09 block transition ease-in-out object-cover w-full h-full"
          data-testid="content-card-image"
        />
      </div>
    </div>
    <div class="break-words prose">
      <p
        class="m-0 font-base-bold text-xs tracking-wider uppercase text-core mb-2"
        data-testid="content-card-eyebrow"
      >
        Mock Eyebrow
      </p>
      <h5
        class="font-heading m-0 mb-2 font-bold text-2xl"
        data-testid="content-card-title"
      >
        Mock title
      </h5>
    </div>
  </div>
</div>

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