固定列与自适应列可通过grid-template-columns结合fr、minmax和auto-fit实现，如200px 1fr用于侧边栏+内容区，minmax(300px,1fr)设定最小宽度，repeat(auto-fit,minmax(200px,1fr))实现响应式均分布局。
在 CSS Grid 布局中，grid-template-columns 可以灵活设置固定宽度和自适应列，实现混合布局。关键在于合理使用长度单位（如 px、em）与弹性单位（如 fr、minmax、auto）。
固定列 + 自适应列的常见组合
通过 grid-template-columns 定义列轨道，可以将固定宽度和可伸缩部分结合使用：
- 固定宽度 + 弹性剩余空间：例如一侧固定导航栏，另一侧内容区自动填充 grid-template-columns: 200px 1fr;
- 多个固定列 + 多个自适应列：适合复杂表格或仪表盘布局 grid-template-columns: 100px 1fr 2fr;
- 固定列 + 最小自适应列：确保自适应列不会被压缩得太小 grid-template-columns: 150px minmax(200px, 1fr);
使用 minmax 控制最小自适应尺寸
当希望自适应列有一个最小宽度时，可以用 minmax() 函数：
grid-template-columns: 240px minmax(300px, 1fr);这表示第二列至少 300px，浏览器变宽时可继续扩展占满剩余空间。
立即学习“前端免费学习笔记（深入）”；
结合 auto-fit 实现响应式自适应
如果想让某些列根据容器自动换行并均分空间，可配合 repeat() 与 auto-fit：
grid-template-columns: 120px repeat(auto-fit, minmax(200px, 1fr));第一列固定 120px，后面每列至少 200px，在空间不足时自动换行排列。
基本上就这些。掌握 fr、minmax 和 auto-fit 的搭配，就能轻松实现固定与自适应共存的网格布局。不复杂但容易忽略细节。
