在css中如何用grid-template设置固定和自适应列

固定列与自适应列可通过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 的搭配，就能轻松实现固定与自适应共存的网格布局。不复杂但容易忽略细节。