使用CSS Grid实现三栏布局最灵活，通过display: grid和grid-template-columns定义列宽，推荐fr、minmax()与auto-fit适配不同屏幕，如repeat(auto-fit, minmax(200px, 1fr))可使列数随屏幕缩小自动调整；结合固定宽度与弹性列（如200px 1fr 200px）满足特定布局需求，并在小屏下用媒体查询堆叠为单列，实现响应式。
实现三栏布局并兼容不同屏幕尺寸，使用CSS Grid是最直接且灵活的方式。通过定义网格容器和列轨道，可以轻松控制布局在各种设备上的表现。
使用Grid定义三栏布局
将父容器设为display: grid，然后通过grid-template-columns设置三列的宽度。推荐使用fr单位、minmax()和auto来提升响应性。
例如：
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 16px;
}
立即学习“前端免费学习笔记（深入）”；
这种写法让中间列是两侧列的两倍宽，整体自动填满容器，适配不同屏幕。
适配移动端：使用minmax和auto-fit
为了让布局在小屏幕上自动调整为更合理的结构，比如从三栏变为一栏或两栏，可以结合minmax()与repeat(auto-fit, ...)。
示例：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
含义是：每列最小200px，最大为1fr，当容器宽度不足时，自动换行减少列数。在手机上可能只显示一栏，在平板或桌面则显示两栏或三栏。
固定+弹性混合布局
某些场景下，希望一侧边栏固定宽度（如导航），主内容区自适应。Grid也能很好支持：
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
}
左侧和右侧固定200px，中间自动填充剩余空间。在窄屏中可配合媒体查询调整：
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
此时三栏垂直堆叠，更适合小屏阅读。
基本上就这些。Grid让三栏布局响应式变得简单，关键在于合理使用fr、minmax和断点控制，无需复杂计算或浮动清除。不复杂但容易忽略。
