如何借助Grid属性与TailwindCSS扩大输入框水平宽度

第一步：解除flex-col容器的宽度限制 #

把带flex flex-col的外层容器，替换/添加max-w-lg w-full类，替代原来的固定w-96。这样容器会自适应父级宽度，最大扩展到max-w-lg的尺寸（Tailwind默认对应32rem），不会被固定宽度锁死。

示例代码：

<!-- 原容器 -->
<div class="flex flex-col w-96">
  <!-- Grid内容 -->
</div>

<!-- 修改后的容器 -->
<div class="flex flex-col max-w-lg w-full mx-auto">
  <!-- Grid内容 -->
</div>

加mx-auto可让容器在大屏上居中，不需要的话直接去掉即可

第二步：用Grid列占比控制前两个输入框宽度 #

给带Grid属性的div设置响应式列模板，同时给前两个输入框所在的Grid项添加列跨度类，让输入框自动填满列空间，无需单独设置固定宽度。

示例代码：

<div class="flex flex-col max-w-lg w-full mx-auto p-4">
  <!-- Grid容器 -->
  <div class="grid gap-4 grid-cols-1 md:grid-cols-3">
    <!-- 第一个输入框：占2列宽度 -->
    <div class="col-span-2">
      <input type="text" class="w-full rounded border p-2" placeholder="输入框1">
    </div>
    <!-- 第二个输入框：占2列宽度 -->
    <div class="col-span-2">
      <input type="text" class="w-full rounded border p-2" placeholder="输入框2">
    </div>
    <!-- 第三个输入框：占1列宽度 -->
    <div class="col-span-1">
      <input type="text" class="w-full rounded border p-2" placeholder="输入框3">
    </div>
  </div>
</div>

关键说明： #

• grid-cols-1 md:grid-cols-3：小屏环境下用单列布局，大屏（md断点及以上）自动分成3列
• col-span-2：让前两个输入框所在的Grid项占据2列宽度，自然比第三列更宽
• 输入框加w-full：确保输入框填满所在Grid项的空间，彻底抛弃w-56这类固定宽度类

这样调整后，外层容器会自适应扩展到max-w-lg的最大宽度，Grid布局按列占比分配空间，前两个输入框自动获得更宽的水平空间，完全满足你的需求。

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