使用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;
}
中间列会随窗口变化自动调整宽度，两侧保持固定。
多个自适应列按比例分配
如果需要多个弹性列，可以用多个 fr 值设置比例。
.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 单位，能快速构建稳定且响应式的固定+自适应布局，无需计算百分比或使用浮动等过时方法。
