如何通过TailwindCSS实现左/右栏10-15%、主栏70-80%的三栏布局？

你的当前代码问题在于：grid-cols-3将容器三等分后，主内容区使用col-span-2占据了2/3宽度，导致右侧边栏没有剩余列空间，只能自动换行到下一行。以下是几种精准实现目标比例布局的方案：

方案一：自定义网格列宽度（精准匹配需求） #

Tailwind支持通过方括号语法直接定义网格列的宽度比例，这是最直接的实现方式：

<div className="grid grid-cols-[15%_70%_15%] h-screen gap-2">
  <div className="bg-green-100 text-green-500 text-lg font-bold text-center">Sidebar left</div>
  <div className="bg-green-100 text-green-500 text-lg font-bold text-center">Main content</div>
  <div className="bg-green-100 text-green-500 text-lg font-bold text-center">Sidebar right</div>
</div>

• grid-cols-[15%_70%_15%]直接指定三列宽度分别为15%、70%、15%，完全符合你要求的比例范围
• 无需额外的col-span类，每个子元素自动对应一列

方案二：基于12栅格系统分配比例 #

如果习惯使用Tailwind的12栅格体系，可以通过计算比例来分配列数：

<div className="grid grid-cols-12 h-screen gap-2">
  <div className="col-span-1.5 bg-green-100 text-green-500 text-lg font-bold text-center">Sidebar left</div>
  <div className="col-span-9 bg-green-100 text-green-500 text-lg font-bold text-center">Main content</div>
  <div className="col-span-1.5 bg-green-100 text-green-500 text-lg font-bold text-center">Sidebar right</div>
</div>

• grid-cols-12将容器分为12等份，col-span-1.5对应12.5%宽度，col-span-9对应75%宽度，均落在你要求的比例区间内
• 这种方式适合需要和其他12栅格布局保持一致的场景

方案三：添加响应式适配（可选） #

如果需要在移动端自动切换为单列布局，可以添加响应式前缀：

<div className="grid grid-cols-1 md:grid-cols-[15%_70%_15%] h-screen gap-2">
  <div className="bg-green-100 text-green-500 text-lg font-bold text-center">Sidebar left</div>
  <div className="bg-green-100 text-green-500 text-lg font-bold text-center">Main content</div>
  <div className="bg-green-100 text-green-500 text-lg font-bold text-center">Sidebar right</div>
</div>

• 默认（移动端）为单列布局，屏幕宽度≥768px（md断点）时切换为三栏布局，提升移动端用户体验

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