如何使用CSS Grid快速实现自适应三栏布局？-css教程-PHP中文网

中间栏没撑开是因为1fr只分配扣除200px后的剩余空间，若父容器无明确宽度上下文（如未设width/max-width、是flex子项被flex-basis卡死、或漏写display: grid），则无剩余空间可分，1fr退化为0；同时内容层约束（如未设max-width的图片、未换行长文本）也会间接挤压中间列。

如何使用css grid快速实现自适应三栏布局？

grid-template-columns: 200px 1fr 200px 为什么中间栏没撑开？

不是写法错，而是 1fr 没“剩余空间”可分。它只在扣除显式尺寸（如 200px）后剩下的宽度里分配，如果父容器本身没明确宽度上下文，1fr 就分不到像素。

父元素没设 width 或 max-width，又直接挂载在 body 下——浏览器认为它无限宽，但 Grid 实际计算时无约束，1fr 退化为 0
容器是某个 display: flex 子项，被 flex-basis 卡死宽度，Grid 容器实际宽度不足
忘了加 display: grid，只写了 grid-template-columns，CSS 直接忽略该声明
某栏内容（比如未设 max-width: 100% 的图片、没断行的长 URL）撑爆轨道，间接挤压中间列

验证方法：打开开发者工具，看中间列的 computed width 是否接近 0 —— 是的话，问题一定出在父容器或内容层。

三栏等宽用 `repeat(3, 1fr)` 还是 `33.33%`？

repeat(3, 1fr) 更可靠。它会先扣除 gap、padding、border，再把剩余空间三等分；而 33.33% × 3 容易超 100%，尤其父容器带 padding 时，不加 box-sizing: border-box 就可能溢出滚动条。

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

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

下载

若父容器有 padding: 20px，务必配 box-sizing: border-box
repeat(3, 1fr) 对内容不敏感：哪怕某栏放了个大图，列宽仍保持一致（只是内容可能溢出）
IE11 完全不支持 fr，需用 @supports not (display: grid) 降级到 Flex

小屏下三栏没塌成一栏？

1fr 本身不响应屏幕尺寸变化，必须显式干预。别指望 auto-fit 或 minmax() 自动兜底所有场景。

移动端必须用媒体查询强制切换：@media (max-width: 768px) { grid-template-columns: 1fr; }
如果用了 minmax(300px, 1fr) 却没响应，先检查最小宽度是否设太高（比如 300px × 3 = 900px，而手机屏宽仅 375px）
确保父容器没被外层限制宽度，比如上层有 max-width: 1200px 但没配 width: 100%，导致 Grid 容器实际可用宽度远小于视口
Safari iOS 15.4 以下不支持 gap，得补 grid-column-gap: 16px 回退