基于Tailwind实现文本框占满空间、选择框宽度适配内容的布局问题

问题分析 #

你当前的grid布局在平板（md断点）下给选择框和输入框各分配了1列，且给选择框外层容器加了固定宽度w-52，同时grid容器设置了justify-items-center，导致选择框无法自适应内容宽度，文本框也没能占满可用空间。

修改后的代码 #

<div className="grid grid-cols-1 md:grid-cols-[auto_1fr] auto-rows-max items-center gap-y-5 p-25 mx-10">
  <!-- 选择框容器：去掉固定宽度，让父容器自适应内容 -->
  <div className="col-span-1">
    <div>
      <select      
        className="bg-gray-50 border p-4 border-gray-300 text-gray-900 text-sm rounded-lg block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
      >
        <option>示例选项内容</option>
        <option>更长的选项文本测试宽度</option>         
      </select>
    </div>
  </div>

  <!-- 文本框容器：保持占满对应列空间 -->
  <div className="col-span-1">
    <div>
      <input           
        type="text"
        value={title}
        placeholder="Title"
        className="border outline-none p-4 rounded-md w-full"
      ></input>
    </div>
  </div>
</div>

关键改动说明 #

• Grid列配置：将grid容器的布局改为grid-cols-1 md:grid-cols-[auto_1fr]，移动端保持单列堆叠，平板及以上模式下第一列宽度随选择框内容自适应（auto），第二列占满剩余所有空间（1fr）。
• 移除固定宽度：删掉选择框外层的w-52，让容器宽度由内部选择框的内容决定，选择框保持w-full以填充其父容器。
• 调整对齐逻辑：移除justify-items-center，避免元素居中导致的空间浪费，保留items-center维持垂直居中即可。

效果说明 #

修改后，平板模式下选择框会根据自身选项内容的宽度自动调整，文本框则占据该行剩余的全部可用空间；移动端下两个元素依然保持垂直堆叠的布局，符合响应式需求。

内容的提问来源于stack exchange，提问作者Captai-N