固定列与自适应列可通过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，浏览器变宽时可继续扩展占满剩余空间。
立即学习“前端免费学习笔记（深入）”；
九歌
九歌–人工智能诗歌写作系统
322 查看详情
结合 auto-fit 实现响应式自适应
如果想让某些列根据容器自动换行并均分空间，可配合 repeat() 与 auto-fit：
grid-template-columns: 120px repeat(auto-fit, minmax(200px, 1fr));
第一列固定 120px，后面每列至少 200px，在空间不足时自动换行排列。
基本上就这些。掌握 fr、minmax 和 auto-fit 的搭配，就能轻松实现固定与自适应共存的网格布局。不复杂但容易忽略细节。
以上就是在css中如何用grid-template设置固定和自适应列的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1029226.html
微信扫一扫 
支付宝扫一扫 
