如何在Tailwind CSS中定义网格列宽？自定义列宽配置求助

你可以通过自定义网格列模板实现需求：让第一列固定50px宽度，第二列自动填充剩余空间。

Tailwind支持用方括号语法直接定义grid-template-columns的值，这里使用grid-cols-[50px_1fr]即可——1fr代表占据容器的剩余可用空间，刚好能和固定宽度的列搭配实现自适应效果。

修改后的代码如下：

<div class="grid grid-cols-[50px_1fr] gap-1">
  <span class="bg-green-500">Item 1 </span>
  <span class="bg-green-500">Item 2 </span>
</div>

另外注意你原代码里的grid-col-2是拼写错误，正确的默认2列类名是grid-cols-2，不过使用自定义列模板后就不需要这个类了。

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