如何在CSS Grid中实现两栏布局且侧边栏固定宽度_使用fr单位与px混合定义-css教程-PHP中文网

240px 1fr 是最简且最稳的写法，因它明确指定第一列固定240px、第二列占剩余空间，不依赖内容、无兼容风险，且避免溢出、无效百分比及冗余minmax。

如何在css grid中实现两栏布局且侧边栏固定宽度_使用fr单位与px混合定义

直接用 grid-template-columns: 240px 1fr 就能实现，不需要额外包装、计算或 JS 干预。

为什么 `240px 1fr` 是最简且最稳的写法

它明确告诉浏览器：第一列严格占 240px，第二列拿走所有剩余空间。这个“剩余”是容器宽度减去 240px 后的真实可用宽，1fr 不是百分比，也不是 auto，更不依赖子元素内容长度。

写 240px auto 会导致右侧列随内容撑开，可能溢出或挤压侧边栏
写 240px 100% 在 Grid 中无效——% 在 grid-template-columns 里按容器宽计算，但和 px 混用时逻辑冲突，结果不可控
写 minmax(240px, 240px) 1fr 纯属冗余，等价于 240px 1fr，还多引入解析开销
某些旧版 Safari 对嵌套 minmax() + fr 有渲染抖动，单 px 值则 100% 稳定

主内容区域撑不满高度？检查这三处

Grid 列宽设对了，但主区域（比如 <main></main>）只包内容、不撑高，大概率是高度链路断了：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

根容器（如或布局包裹层）没设高度来源：min-height: 100vh 或 height: 100%（且父级不能是 height: auto）
Grid 容器自身没设 min-height: 100% 或 height: 100% —— 1fr 在垂直方向无参考基准时会退化
主内容区域写了 align-self: start 或继承了 align-items: start，删掉即可让它默认拉满高度

滚动行为异常：谁该滚，怎么滚

默认整个 Grid 容器一起滚动。若要侧边栏固定、仅主内容区域独立滚动，必须显式隔离：

给主内容区域（如 <main></main>）加 overflow-y: auto 和明确高度约束，例如 height: calc(100vh - 60px)
侧边栏本身不要设 overflow，也别加 position: sticky —— Grid 已通过列轨道天然固定其位置
绝对不要给 Grid 容器设 overflow，否则会截断侧边栏或导致双滚动条
如果主内容内有长表格或图片，记得加 min-width: 0 防止它撑大整列，间接压缩 1fr 可分空间

真正容易被忽略的是：fr 的“剩余空间”计算会扣除 gap、固定列尺寸、以及所有列的 min-content（比如未折行长单词、无约束图片）。哪怕你写了 240px 1fr，只要主内容区有个 white-space: nowrap 的长字符串，它就可能把整行撑宽，让 1fr 实际可分空间变小——这不是 bug，是 fr 的设计逻辑。