必须同时满足容器有明确宽高、轨道用minmax(0,1fr)、子项设min-width:0，再配overflow:hidden才生效；仅加overflow-x:hidden无效，因子项默认min-width:auto会撑开轨道。

直接加 overflow-x: hidden 到 body 或 Grid 容器上，大概率压不住横向滚动条——因为溢出源不在容器“内容框”里，而在子项的尺寸锁定机制中。必须同时满足三件事：容器有明确宽度边界、轨道允许收缩、子项主动放弃最小宽度。

为什么 overflow-x: hidden 加在 Grid 容器上无效

Grid 容器默认不创建强 BFC，且 overflow 只裁剪其内容框（content box），但子项会优先撑开隐式轨道甚至整个容器。尤其当子项是图片、长 URL、<pre class="brush:php;toolbar:false;"></pre> 或嵌套 Flex 时，它们自带 min-width: auto，浏览器宁可拉宽列也不折行或缩放。

• html 和 body 必须重置：html { overflow-x: hidden; }（不是 body），body { margin: 0; }
• 避免用 width: 100vw —— Windows 下它含滚动条宽度，实际超宽；改用 width: 100% 或 100dvw
• 用 DevTools 运行这行代码快速标出越界元素：$$('*').forEach(el => { if (el.scrollWidth > el.clientWidth + 1) el.style.outline = '2px solid red' })

grid-template-columns 必须写 minmax(0, 1fr)，不能只写 1fr

1fr 等价于 minmax(auto, 1fr)，遇到长无空格文本（如 JWT token、base64）或表格内容，浏览器仍按 min-content 分配最小列宽，整列直接被撑爆。只有显式声明 0 才打开收缩通道。

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

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

下载

• 正确：grid-template-columns: repeat(auto-fit, minmax(0, 1fr)));
• 错误：grid-template-columns: 1fr 1fr; 或 minmax(0, 1fr) auto（auto 列会抢走最小宽度）
• 降级兼容：用 @supports (grid-template-columns: minmax(0, 1fr)) 包裹关键规则
• 搭配 repeat(auto-fit, ...) 更安全；auto-fill 会保留空轨道，破坏列宽平衡

子项必须显式设 min-width: 0，且作用于真实 DOM 节点

min-width: 0 是“松绑”操作，不是装饰。它必须落在 Grid 直接子元素上，且对嵌套结构里的内层 Flex/Grid 子项也生效。漏掉任意一层，前面所有配置都白搭。

• 正确写法：.grid > .item { min-width: 0; }（注意层级，避免污染）
• 嵌套场景也要加固：.item > .inner { min-width: 0; }
• 框架组件（如 Ant Design Card）不自带该样式，需手动覆盖：.ant-card .ant-card-body { min-width: 0; }
• Vue scoped 样式需用 :deep(.item)，React styled-components 要确保类名透传到真实 <div> <h3>文字和媒体内容要单独处理，不能只靠轨道收缩</h3> <p>轨道能缩、子项能压，只是解决了“能不能缩”的问题；“缩了之后内容怎么显示”，还得配具体策略。否则就算 <code>min-width: 0 生效，长 URL 仍会横向溢出而非换行。
  • 长无空格文本：overflow-wrap: break-word（推荐）或 word-break: break-all（适合哈希/日志）
  • 单行标题截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（三者缺一不可）
  • 图片/iframe/video：max-width: 100%; height: auto;，并确认父容器 box-sizing: border-box
  • 多行文本截断（现代浏览器）：display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

  最容易被忽略的是嵌套结构里只改了外层 Grid 的轨道和 min-width: 0，却忘了内层 Flex 容器的子项（比如按钮、输入框）同样默认 min-width: auto——它们才是最终把整行顶出视口的最后一环。