最直白的三栏固定宽布局是用display: grid配合grid-template-columns指定各列绝对宽度（如200px 600px 300px），并用gap或column-gap设置列间间距；内容溢出需子元素自行处理overflow等属性，响应式建议改用1fr或切换布局而非硬写像素值。
用 grid-template-columns 直接写死三列宽度
三栏固定宽布局最直白的做法，就是给容器设置 display: grid，再用 grid-template-columns 明确指定每列像素值。比如左栏 200px、中栏 600px、右栏 300px：
body {
display: grid;
grid-template-columns: 200px 600px 300px;
}
这样三列就严格按数值分配宽度，不随容器缩放变化。注意：这里没有用 fr 或百分比，所有值都是绝对长度单位（px、rem、em 都可以）。
别漏掉 grid-column-gap 或 gap 控制间距
固定宽列之间默认紧贴，要加间隙得显式声明。老写法用 grid-column-gap，新写法统一用 gap（同时控制行列）：
.container {
display: grid;
grid-template-columns: 200px 600px 300px;
gap: 20px; /* 左右列之间各留 20px 间隙 */
}
如果只想要列间间隙、不要行间间隙，就用 column-gap: 20px，更精准。但注意 IE 不支持 gap 和 column-gap，需 fallback。
立即学习“前端免费学习笔记（深入）”；
内容超出列宽时，overflow 行为由子元素自己控制
Grid 只管划分轨道，不自动截断或换行内容。如果某列里放了超长文本或大图，它会撑开列宽或溢出，取决于子元素的 overflow、white-space 等设置：
-
overflow: hidden可裁剪溢出部分 -
white-space: nowrap防止文本换行，配合text-overflow: ellipsis显示省略号 - 图片记得加
max-width: 100%，否则可能突破列宽
Grid 本身不会替你做这些，得在子元素上单独处理。
响应式切换时，避免用 @media 重写整套 grid-template-columns
真要适配小屏，别在每个断点里重复写三组像素值。更稳的方式是用 minmax() 搭配 auto-fit 做弹性退化，或者直接切回 flex / 流式布局。纯固定宽 Grid 在移动端容易横向滚动或内容被裁，尤其当总宽度超过屏幕时：
@media (max-width: 900px) {
.container {
grid-template-columns: 1fr; /* 改单列，而不是硬写 200px/600px/300px */
}
}
固定像素列在响应式场景下本质是反模式，除非你明确要求「永远不调整」——比如后台管理系统的侧边栏+主内容+工具栏这种强结构化区域。