使用CSS Grid结合固定与弹性列宽实现三栏布局，通过grid-template-columns设置两侧固定宽度、中间自适应，配合媒体查询在小屏下转为单列堆叠，利用minmax等函数优化响应性，实现无需JavaScript的高效适配方案。
实现三栏固定宽度布局并兼容响应式，关键在于结合CSS Grid的固定列宽与自适应列宽能力。通过grid-template-columns灵活设置，可以在保持部分区域固定的同时，让主内容区随屏幕变化自动调整。
使用Grid定义固定与弹性列
在Grid布局中，可以用像素（px）设置侧边栏固定宽度，用fr单位或auto让中间列自适应剩余空间。
- 左侧导航栏固定200px
- 中间内容区占据剩余宽度（使用
1fr） - 右侧边栏固定150px
示例代码：
.container {
display: grid;
grid-template-columns: 200px 1fr 150px;
gap: 16px;
width: 100%;
}
响应式断点下的布局调整
当屏幕变小时，固定列可能挤压内容区甚至导致横向滚动。可通过媒体查询优化小屏体验。
立即学习“前端免费学习笔记（深入）”；
在移动端，可将三栏改为单列堆叠，提升可读性。
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
这样，所有栏目垂直排列，适配手机屏幕。
混合单位实现更精细控制
除了fr和px，还可使用minmax()或auto增强灵活性。
例如，希望中间列最小宽度为300px，但又能扩展填充空白：
.container {
grid-template-columns: 200px minmax(300px, 1fr) 150px;
}
这种写法兼顾了内容安全宽度和空间利用率。
基本上就这些。利用Grid的列模板语法，既能维持固定结构，又能动态响应不同设备，无需复杂计算或JavaScript干预。关键是根据内容优先级合理分配单位，再辅以断点调整，就能实现真正兼容的三栏布局。
