使用 grid-template-columns 配合 minmax() 可创建弹性网格布局，.container 使用 repeat(auto-fit, minmax(200px, 1fr)) 实现每列最小 200px、最大均分空间，auto-fit 自动填满容器；多列可设 minmax(150px, 1fr) 与 minmax(300px, 2fr) 按比例分配，或限制列宽如 minmax(300px, 600px) 防过宽；注意 auto-fit 填满容器、auto-fill 保留空轨，fr 在 minmax 中有效，避免全设固定最大值以保持弹性，减少媒体查询实现响应式布局。
使用 grid-template-columns 配合 minmax() 可以轻松创建具有弹性的网格列布局，让列宽在最小和最大值之间灵活调整，适应不同屏幕尺寸。
基本语法与作用
minmax(min, max) 定义一个尺寸范围，min 是列的最小宽度，max 是最大宽度。当容器空间充足时，列可以扩展到最大值；空间不足时，不会小于最小值。
grid-template-columns 用来定义每列的宽度，结合 minmax() 能实现响应式弹性列。
常用弹性布局模式
以下是几种实用的弹性列设置方式：
立即学习“前端免费学习笔记（深入）”；
固定最小 + 最大自适应（推荐）让每一列至少有一定宽度，同时允许其在空间足够时扩展。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
说明：每列最小 200px，最大为 1fr（均分可用空间），auto-fit 会自动换行并拉伸填满。
适合侧边栏+主内容区结构，主列弹性伸缩。
.container {
display: grid;
grid-template-columns: minmax(150px, 1fr) minmax(300px, 2fr);
}
左侧列最小 150px，右侧主列最小 300px，两者按比例分配空间。
限制最大宽度防止过宽避免某列在大屏下过宽影响阅读。
.container {
display: grid;
grid-template-columns: minmax(300px, 600px) 1fr;
}
第一列在 300px 到 600px 之间弹性变化，超出部分由第二列承接。
关键点提示
-
auto-fit vs auto-fill：用
auto-fit会让项目占满容器，auto-fill保留空轨道。 -
fr 单位在 minmax 中有效：如
minmax(200px, 1fr)是合法且常用的写法。 - 避免过度约束：不要给所有列都设固定最大值，否则失去弹性。
基本上就这些，合理使用 minmax() 能大幅减少媒体查询，实现真正流动的网格布局。不复杂但容易忽略细节。
