Tailwind Grid元素未横向并排渲染问题求助

使用Tailwind CSS编写了如下网格布局代码，预期col-span-8和col-span-4的两个容器能横向并排（8+4=12列，填满网格），但实际输出中两个元素呈上下排列：

<div className='grid grid-cols-12 gap-12 mb-8'>
      <div className='col-span-8'>
        <div className='box'></div>
      </div>
      <div className='col-span-4'>
        <div className='box'></div>
      </div>
</div>

自定义.box类的CSS代码：

.box{
  background-color: #2b2d40;
  height: 100px;
  width: auto;
}

以下是几个实用的排查和修复方向：

• 检查属性拼写（最常见问题）
  如果是在普通HTML文件中，要把className改成class——className是React、Vue等框架的专属属性，普通HTML无法识别，会导致Tailwind的网格类完全不生效，容器默认以块级元素上下排列。

• 确认Tailwind CSS是否正确加载
  确保项目已正确引入Tailwind：用CDN的话检查链接是否有效；本地项目则确认tailwind.config.js配置、构建脚本是否正常，比如有没有把HTML文件路径加入content配置项，确保Tailwind能扫描到这些类并生成对应的CSS。

• 排查冲突样式
  打开浏览器开发者工具，查看最外层div的计算样式，确认display: grid是否生效。如果被其他CSS的display: block等属性覆盖，需要去掉冲突样式，或者针对性调整样式优先级。

• 检查容器宽度与间隙的适配
  网格设置了gap-12（对应48px的间距），如果父容器宽度不足，网格会自动换行。可以先移除gap-12测试是否能并排，再根据实际情况调整间隙大小或父容器宽度。

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