Grid中minmax()未按预期工作：始终使用最大值

问题根源 #

你用的minmax(100px, 300px)在块级Grid容器（默认width:100%）中，Grid布局的轨道分配逻辑会优先让第一列尽可能达到300px的最大值——因为容器占满了父元素宽度，有足够空间分配给第一列，剩下的才留给auto列。所以哪怕左侧内容很短，第一列也会被拉伸到接近300px的宽度。

解决方法 #

有两种简单的调整方式：

方式一：让Grid容器宽度适配内容

给容器添加inline-grid类，让容器不再强制占满父元素宽度，而是由内部内容决定宽度。此时第一列会根据内容自动收缩（但不小于100px），内容过长时仍会被限制在300px：

<div className="inline-grid grid-cols-[minmax(100px,300px)_auto] grid-rows-1">
  <div className="bg-red-600">left</div>
  <div className="bg-yellow-600">main content</div>
</div>

方式二：使用fit-content替代纯minmax

fit-content(300px)会让列宽优先匹配内容宽度，仅当内容超过300px时才限制宽度。配合min-w-[100px]确保列宽不小于100px：

<div className="grid grid-cols-[fit-content(300px)_auto] grid-rows-1">
  <div className="bg-red-600 min-w-[100px]">left</div>
  <div className="bg-yellow-600">main content</div>
</div>

或者直接把列宽写成minmax(100px, fit-content(300px))，效果一致：

<div className="grid grid-cols-[minmax(100px,fit-content(300px))_auto] grid-rows-1">
  <div className="bg-red-600">left</div>
  <div className="bg-yellow-600">main content</div>
</div>

内容的提问来源于stack exchange，提问作者me.at.coding