在 CSS Grid 布局中，给列设置一个合理的最小宽度，既能让卡片、商品列表、仪表盘等内容在宽屏下充分利用空间，也能避免在窄屏下被压缩到无法阅读。实现这一目标的核心并不是简单写死像素值，而是使用 minmax() 函数与 fr 单位配合，让轨道在最小尺寸和弹性尺寸之间动态变化。
一、用 minmax() 函数设置列的最小与最大尺寸
minmax() 是 Grid Layout 中专门用来定义轨道尺寸范围的函数，它接收两个参数：第一个参数表示轨道的最小尺寸，第二个参数表示轨道的最大尺寸。对于列来说，如果我们希望某一列至少保持 200px，同时在剩余空间允许时自动扩展，可以写成：
.grid {
display: grid;
grid-template-columns: minmax(200px, 1fr);
}
这段样式表示该列的最小宽度为 200px，最大宽度为 1fr。1fr 是 Grid 中的弹性单位，代表容器剩余空间的一份。当容器宽度大于 200px 时，列会占满全部可用宽度；当容器宽度小于 200px 时，列也不会被压缩到 200px 以下，而是保持 200px 并可能触发容器横向溢出。
这里需要特别理解 minmax() 中两个参数的合法性。最小值通常可以使用长度值、百分比、auto、min-content、max-content 等；最大值除了这些之外，还允许使用 fr 单位。如果最小值大于最大值，浏览器会自动将最大值提升为最小值，因此写 minmax(1fr, 200px) 这种顺序不会产生预期效果。对于最小宽度场景，推荐的组合是固定长度作为最小值、fr 作为最大值，例如 minmax(240px, 1fr)。
二、结合 repeat() 与 auto-fill、auto-fit 创建响应式网格
单个列的最小宽度很容易理解，但实际项目中往往需要多列网格。如果手动写 minmax(220px, 1fr) 四遍，列数固定，无法根据屏幕宽度自动增减。这时可以借助 repeat() 函数，并且使用 auto-fill 或 auto-fit 作为重复次数。
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
上面代码表示：浏览器根据容器宽度自动计算能够放下多少列，每一列的最小宽度为 220px，最大为 1fr。容器宽度为 1000px 时，通常会创建 4 列；容器变为 700px 时，可能只创建 3 列。整个过程中不需要写任何媒体查询，列数就能自动变化。
auto-fill 和 auto-fit 的区别主要体现在轨道数量多于实际项目时。auto-fill 会保留空轨道，即使内容不足以填满所有列，也会留下空白列；auto-fit 会折叠空轨道，让已有项目的列拉伸填满容器。如果希望卡片在屏幕很宽时不留下整列空白，一般优先使用 auto-fit。两者都依赖 minmax() 提供的最小宽度，因为浏览器需要根据最小值来计算最多能容纳多少列。
还需要注意子元素本身可能阻止列收缩。例如网格项内部包含一个很长的图片或一段没有断行的文本，默认 min-width 为 auto，项目不会缩小到内容宽度以下。此时可以给网格项设置 min-width: 0，或在需要截断的位置使用 overflow: hidden，让轨道的最小宽度真正由 minmax() 控制。
三、min-width 与 minmax() 的差异及选型对比
很多前端开发者会混淆给网格项设置 min-width 和给轨道设置 minmax()。两者作用对象不同：min-width 作用在网格项目上，控制项目本身的最小宽度；minmax() 作用在轨道上，控制列轨道的最小和最大尺寸。只给项目设置 min-width: 200px，并不能让列轨道在布局计算中始终保留 200px 的轨道空间，项目可能会溢出，也可能因为默认 1fr 轨道仍然参与弹性分配而出现非预期结果。
相反，grid-template-columns: 200px 是固定列宽，无论容器剩余多少空间，列都是 200px，不会伸展。grid-template-columns: 1fr 会均分可用空间，但在容器过窄时可以把列压缩到很小。只有 minmax(200px, 1fr) 同时满足不小于 200px 和空间充足时自动扩展两个条件。
| 方案 | 列宽行为 | 是否响应式 |
|---|---|---|
| 200px | 固定 200px，不伸展不收缩 | 否 |
| 1fr | 弹性伸缩，但没有下限 | 是 |
| min-width:200px | 限制项目宽度，不直接定义轨道 | 部分 |
| minmax(200px, 1fr) | 最小 200px，空间充足时伸展 | 是 |
从表格可以看出，设置列最小宽度的最佳实践是使用 minmax() 明确轨道范围。如果还需要限制最大宽度，可以把第二个参数改为固定长度，例如 minmax(200px, 600px)；如果希望最大宽度随内容变化，可以使用 max-content。对于不希望出现横向滚动条的移动端布局，还应配合 min-width: 0 和 overflow 处理，避免内容把轨道撑破。
四、实战：构建最小列宽为 240px 的卡片网格
下面通过一个完整示例展示如何搭建一个响应式卡片网格。假设每张卡片至少需要 240px 才能保证标题、图片和按钮不拥挤，同时希望在桌面端自动显示更多列，在平板和手机端自动减少列数。
<div class="card-grid"> <div class="card">卡片 1</div> <div class="card">卡片 2</div> <div class="card">卡片 3</div> <div class="card">卡片 4</div> </div>
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
min-width: 0;
padding: 16px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fafafa;
}
这里使用 auto-fit 而不是 auto-fill，是为了在卡片数量较少或容器很宽时，让已有卡片能够拉伸填满整行，而不是留下空轨道。min-width: 0 加在 .card 上，是为了保证卡片内部的图片、长文本不会反过来限制网格轨道收缩。gap 用来设置列间距和行间距，也可以分别使用 column-gap 和 row-gap。
如果希望网格更稳定，还可以给容器设置 max-width 并居中。最小宽度并非越大越好，240px 是一个适合卡片内容的参考值；对于表格密集型的后台仪表盘，可能 300px 更合适；对于移动端标签组，160px 可能就够用。实际项目中建议先根据内容最小可读宽度确定这个数值，再用浏览器开发者工具测试不同屏幕宽度下的列数变化。