使用CSS Grid布局可通过grid-template-columns属性实现固定与自适应列组合，如“200px 1fr”创建左固定右自适应两列；“200px 1fr 100px”实现三栏布局；“240px 2fr 1fr”使多自适应列按比例分配；结合媒体查询可在小屏下变为单列，提升响应式体验。
要实现CSS中固定列与自适应列的组合布局，使用 Grid 布局（CSS Grid） 是最简洁高效的方式。通过 grid-template-columns 属性，可以轻松定义某些列为固定宽度（如 200px），其他列自动填充剩余空间。
基本思路：使用 fr 单位与固定单位混合
Grid 提供了 fr（fraction）单位，表示“可用空间的份数”。将固定列设为像素值（如 200px），自适应列用 1fr 或多个 fr 比例，即可实现灵活布局。
示例：左侧固定 200px，右侧占满剩余空间
.container { display: grid; grid-template-columns: 200px 1fr; gap: 16px; height: 100vh;}
此时容器分为两列：第一列固定 200px 宽，第二列自动伸缩，占据剩余宽度。
立即学习“前端免费学习笔记（深入）”；
多列混合布局：固定 + 自适应 + 固定
常见于三栏布局，如侧边栏 + 主内容 + 右侧工具栏。
示例：左栏 200px，中间自适应，右栏 100px
.container { display: grid; grid-template-columns: 200px 1fr 100px; gap: 12px; height: 100vh;}
中间列会随窗口变化自动调整宽度，两侧保持固定。
瞬映
AI 快速创作数字人视频，一站式视频创作平台，让视频创作更简单。
57 查看详情
多个自适应列按比例分配
如果需要多个弹性列，可以用多个 fr 值设置比例。
示例：左固定 240px，右两列 2:1 分配剩余空间
.container { display: grid; grid-template-columns: 240px 2fr 1fr; gap: 20px;}
右侧两列将按 2:1 的比例共享除 240px 外的所有水平空间。
响应式中的灵活应用
结合媒体查询，可在不同屏幕下调整列行为。
移动端适配示例：
@media (max-width: 768px) { .container { grid-template-columns: 1fr; /* 小屏下变为单列 */ }}
在移动设备上堆叠显示，提升可读性。
基本上就这些。利用 grid-template-columns 混合使用像素值和 fr 单位，能快速构建稳定且响应式的固定+自适应布局，无需计算百分比或使用浮动等过时方法。
以上就是CSS固定列与自适应列组合布局如何实现_通过Grid模板列设置固定与自适应比例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/948728.html
微信扫一扫 
支付宝扫一扫 
