如何在Tailwind CSS Grid中实现左列占剩余空间、右列固定宽度

当前使用Tailwind CSS的Grid布局中，<li>设置了grid-cols-2导致左右两列各占50%宽度。需求是让左侧的.task-div容器占据列表项的剩余空间，右侧的删除按钮仅占用自身内容所需的宽度。尝试过col-span-1、col-auto等类但未达到预期效果，已知原生CSS中可以通过grid-template-columns: 1fr auto实现，想了解Tailwind中的正确实现方式。

要实现这个布局，核心是自定义Grid的列模板，步骤如下：

• 修改列表项的Grid列配置
  将<li>上的grid-cols-2替换为grid-cols-[1fr_auto]，这是Tailwind支持的自定义网格列语法，直接对应原生CSS的grid-template-columns: 1fr auto。1fr表示左侧列占据所有可用剩余空间，auto表示右侧列根据自身内容宽度自适应。

• 移除多余的列跨度类
  删除.task-div和按钮上的col-span-1类，因为当前网格只有两列，每个子元素默认会占据一列，不需要额外指定跨度。

• 调整按钮样式（可选）
  给按钮添加self-center类可以让按钮在垂直方向上居中对齐，提升视觉效果。

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./dist/output.css">
    <script src="./dist/main.js"></script>
</head>

<body class="flex h-screen items-center justify-center">
    <div id="container" class="relative bg-orange-300 w-4/5 h-screen">
        <ul>
            <li class="grid grid-cols-[1fr_auto]">
                <div class="task-div">
                    <h1 class="task-title">Hello</h1>
                    <p class="task-desc">My name if Bishal</p>
                </div>
                <button class="self-center"><img class="w-6 h-6" src="./icon/bin.png" alt="Del"></button>
            </li>
            <li class="grid grid-cols-[1fr_auto]">
                <div class="task-div">
                    <h1 class="task-title">Hello</h1>
                    <p class="task-desc">My name is Bishal</p>
                </div>
                <button class="self-center"><img class="w-6 h-6" src="./icon/bin.png" alt="Del"></button>
            </li>

        </ul>
        <a href="#" id="new-task" class=" z-10 absolute bottom-10 right-10 text-5xl ">+
        </a>
    </div>
</body>

</html>

CSS代码无需修改 #

原有的Tailwind组件样式可以保持不变：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .task-div {
        @apply px-2 pb-2 border-2 mx-2 mt-2 h-[75px] overflow-hidden
    }

}

@layer components {
    .task-title {
        @apply text-xl font-bold inline-block
    }
}

@layer components {
    .task-desc {
        @apply text-sm
    }

}

原理说明 #

• grid-cols-[1fr_auto]是Tailwind v3+支持的任意值语法，允许直接在类名中定义网格列的宽度规则，完全等价于原生CSS的grid-template-columns: 1fr auto。
• 1fr单位会分配容器中所有未被其他列占用的空间，确保左侧内容区域自适应剩余宽度。
• auto单位会让列的宽度等于其内容的最大宽度，刚好容纳删除按钮的图标。

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