如何在Tailwind中使用grid-template-columns设置网格列宽 避免布局破坏

在Tailwind中实现非等分网格列宽，完全遵循原生CSS Grid的设计逻辑：列宽定义是grid父容器的专属属性，不是网格子项的属性。你之前遇到的“直接给列元素设宽度破坏布局”的问题，本质是搞错了列宽属性的作用对象。

20%/80% 两列布局的对应实现 #

你在原生CSS中实现的两列占比布局，不需要给子项设置任何宽度类，直接给父级网格容器配置对应的grid工具类即可，两种常用实现方式：

• 无需修改配置：任意值语法（日常开发首选）
  Tailwind 支持在工具类名中用方括号传入任意合法CSS值，完全对齐原生CSS的写法逻辑：

  <div class="grid grid-cols-[20%_80%]">
    <div class="item1">1</div>
    <div class="item2">2</div>
  </div>
  

  注意类名内的空格需要替换为下划线，Tailwind的任意值语法会自动把下划线解析为空格，最终生成的CSS和你手写的.grid-container { grid-template-columns: 20% 80% }效果完全一致。
• 高频复用场景：配置自定义预设
  如果这套20%/80%的布局会在项目中多处使用，可以在Tailwind配置中扩展预设的列宽规则，避免重复编写长串任意值：

  // tailwind.config.js 扩展配置片段
  module.exports = {
    theme: {
      extend: {
        gridTemplateColumns: {
          // 新增自定义两列布局规则
          'sidebar': '20% 80%',
        }
      }
    }
  }
  

  配置完成后，直接给父容器加grid grid-cols-sidebar类，即可快速应用这套布局。

常见踩坑提醒 #

• 不要给网格子项单独设置宽度类：网格布局的列轨道宽度由父容器的grid-template-columns规则决定，子项默认会占满所在列的全部轨道宽度。如果给子项单独加w-[20%]、w-[80%]这类宽度类，只会让子项在原本的列轨道内偏移，不会真正改变列宽，最终导致所有子项对齐错乱，也就是你遇到的布局被破坏的核心原因。
• 响应式适配直接加前缀即可：如果需要在不同屏幕尺寸下调整列宽，直接给列宽类加响应式断点前缀，比如小屏幕用grid-cols-1实现纵向堆叠，中等屏幕以上切换为md:grid-cols-[20%_80%]的两列布局即可。

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