如何在Tailwind CSS中设置auto和fr类型的网格模板列？

完全可以，Tailwind支持通过自定义网格列语法直接实现这个配置，你只需要给容器添加grid-cols-[auto_1fr]类即可。

这个类对应的CSS输出就是你需要的：

.grid-cols-[auto_1fr] {
  grid-template-columns: auto 1fr;
}

举个简单的使用示例：

<div class="grid grid-cols-[auto_1fr] gap-4">
  <div class="bg-gray-200 p-2">自适应宽度的元素</div>
  <div class="bg-blue-200 p-2">占剩余空间的元素</div>
</div>

在这个示例里，第一个子元素会根据自身内容宽度自适应，第二个子元素会占据容器剩下的全部可用空间。

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