如何创建Tailwind CSS响应式两列网格：一列固定、一列自适应拉伸

要实现Tailwind CSS下一列固定、一列自适应的两列布局，可通过以下两种常用方案解决：

方案1：Grid布局实现 #

给外层容器配置网格列规则即可，自适应列用1fr占满剩余空间，固定列按你设置的w-12自动适配宽度：

<div class="grid grid-cols-[1fr_auto] gap-2 items-center">
  <!-- 自适应列：输入框加w-full占满分配的列空间 -->
  <input type="password" class="w-full px-3 py-2 border rounded" placeholder="Password">
  <!-- 固定列：你原本设置的w-12即可生效 -->
  <button class="w-12 py-2 border rounded">Show</button>
</div>

grid-cols-[1fr_auto]是Tailwind的任意值语法，直接定义了两列的宽度规则：第一列占满所有可用剩余空间，第二列宽度匹配自身内容尺寸。

方案2：Flex布局实现 #

用弹性布局的flex-1属性实现自适应占满剩余空间：

<div class="flex gap-2 items-center">
  <!-- 自适应列：加flex-1占满按钮之外的剩余空间 -->
  <div class="flex-1">
    <input type="password" class="w-full px-3 py-2 border rounded" placeholder="Password">
  </div>
  <!-- 固定列：w-12规则直接生效 -->
  <button class="w-12 py-2 border rounded">Show</button>
</div>

flex-1等价于flex: 1 1 0%，会让当前元素自动拉伸占满弹性容器内的剩余可用空间。

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