如何用Tailwind CSS实现响应式双栏布局并修复移动端芯片边距问题

问题场景 #

桌面端布局正常，但移动端隐藏标题文本与进度条后，CustomButton（芯片）的边距不均匀，电脑技能板块代码如下：

<div className="grid grid-rows-4 grid-cols-1 sm:grid-cols-3 items-center justify-center w-full">
  <p className="text-center hidden md:block">Computer Skills</p>
  <div className="flex flex-row gap-2 justify-center col-span-2 items-center">
    <CustomButton text="STUB1" />
    <ProgressBar width="w-full" />
  </div>
  <div className="col-span-1  m-2 sm:m-6" />
  <div className="flex gap-2 justify-center col-span-2 items-center">
    <CustomButton text="STUB2" />
    <ProgressBar width="w-3/4" />
  </div>
  <div className="col-span-1 m-2 sm:m-6" />
  <div className="flex gap-2 justify-center col-span-2 items-center mt-3 sm:mt-0">
    <CustomButton text="STUB3" />
    <ProgressBar width="w-3/4" />
  </div>
  <CustomLine isDashed="yes" />
</div>

问题原因 #

1. 移动端下保留了空的col-span-1元素，其m-2边距与按钮容器的边距规则不统一
2. 进度条隐藏后，按钮容器的justify-center布局配合空列的额外边距，导致芯片位置偏移
3. 部分按钮容器的mt-3 sm:mt-0导致移动端顶部边距不一致

修复代码 #

<div className="grid grid-rows-4 grid-cols-1 sm:grid-cols-3 items-center justify-center w-full">
  <p className="text-center hidden md:block">Computer Skills</p>
  <!-- 统一按钮容器边距，移动端隐藏进度条 -->
  <div className="flex flex-row gap-2 justify-center col-span-2 items-center m-2 sm:m-6">
    <CustomButton text="STUB1" />
    <ProgressBar className="hidden sm:block" width="w-full" />
  </div>
  <!-- 移动端隐藏空列，避免干扰布局 -->
  <div className="col-span-1 hidden sm:block" />
  <div className="flex gap-2 justify-center col-span-2 items-center m-2 sm:m-6">
    <CustomButton text="STUB2" />
    <ProgressBar className="hidden sm:block" width="w-3/4" />
  </div>
  <div className="col-span-1 hidden sm:block" />
  <div className="flex gap-2 justify-center col-span-2 items-center m-2 sm:m-6">
    <CustomButton text="STUB3" />
    <ProgressBar className="hidden sm:block" width="w-3/4" />
  </div>
  <CustomLine isDashed="yes" />
</div>

关键修改点 #

• 给ProgressBar添加hidden sm:block，确保移动端仅显示芯片
• 给空列元素添加hidden sm:block，移除移动端的空列边距干扰
• 所有按钮容器统一使用m-2 sm:m-6，保证移动端/桌面端边距一致
• 移除零散的mt-3 sm:mt-0，改用统一边距类避免布局差异

推广到其他板块 #

将以下规则复用至其他板块即可：

• 用hidden sm:block隐藏移动端不需要的元素（空列、进度条、标题等）
• 统一同类容器的边距类，避免边距规则混乱
• 检查grid布局在移动端的列跨度，确保元素占比合理

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