Tailwind非均匀三列布局问题：最后一列无法靠右

问题根源 #

你代码里的grid容器加了max-w-md，这直接限制了容器的最大宽度，没法撑满父级<a>标签的w-3/4宽度，所以最后一列自然没法对齐到容器最右侧。另外，就算用了grid-cols-[max-content_1fr_max-content]，因为容器宽度被限制，中间的1fr也没法把最后一列挤到最右边。

方案一：用Flex布局（最简单直接） #

Flex天生适合这种“前两个元素紧凑排列，最后一个推到最右”的场景，代码更简洁：

<a href="https://www.google.com/" class="flex w-3/4 h-32 bg-blue-50 items-center hover:bg-blue-100" v-for="video in content.videos">
  <div class="flex w-full p-2 bg-gray-200 items-center">
    <!-- 图标列 -->
    <div class="pt-2 mr-5">
      <img src="../../assets/video-md.svg" alt="tutorial" />
    </div>
    <!-- 标题&资源类型列，占满中间剩余空间 -->
    <div class="flex-1">
      <span class="text-2xl pb-5 block">{{ video.title }}</span>
      <span>{{ video.paid ? 'Free Resource' : 'Paid Resource' }}</span>
    </div>
    <!-- 时长列，自动靠右 -->
    <div class="text-sm">
      <span>{{ video.length }}</span>
    </div>
  </div>
</a>

核心逻辑： #

• 内层容器用flex w-full确保撑满父级<a>的宽度
• 中间列加flex-1，吃掉前两列和最后一列之间的所有剩余空间，自然把最后一列推到最右侧
• 用mr-5给图标和标题列设置间距，替代原来的gap，更灵活控制前两列的距离

方案二：修正Grid布局 #

如果一定要用Grid，只需做两个小修改：

<a href="https://www.google.com/" class="flex w-3/4 h-32 bg-blue-50 items-center hover:bg-blue-100" v-for="video in content.videos">
  <div class="grid grid-cols-[max-content_1fr_max-content] gap-5 p-2 bg-gray-200 w-full">
    <div class="pt-2">
      <img src="../../assets/video-md.svg" alt="tutorial" />
    </div>
    <div>
      <span class="text-2xl pb-5 block">{{ video.title }}</span>
      <span>{{ video.paid ? 'Free Resource' : 'Paid Resource' }}</span>
    </div>
    <div class="text-sm self-end justify-self-end">
      <span>{{ video.length }}</span>
    </div>
  </div>
</a>

修正点： #

1. 删掉max-w-md，让Grid容器完全占满父级宽度
2. 给最后一列加justify-self-end，强制内容对齐到列的最右侧（Grid的max-content列默认左对齐，这个类能修正位置）

小优化建议 #

• 把原来的<br>换成block类让标题独占一行，更符合Tailwind的原子化风格
• 保留self-end让时长垂直对齐到容器底部，视觉上更协调

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