css grid本身不导致cls，问题在于grid item内图片等未设宽高导致布局偏移；用background-image+min-height、固定gap单位、避免百分比列宽及绝对定位规范可稳定布局。

CSS Grid本身不导致CLS，但布局未预留空间会触发偏移

Grid 容器本身是稳定的，问题出在 grid item 内部内容（尤其是 <img>）没设宽高、没约束尺寸时，浏览器无法预估渲染占位。图片加载前，<h3></h3> 和 <p></p> 会塌缩到最小高度；图片一加载，整个 grid item 突然撑开，下方所有行跟着下移——这就是 CLS 的典型来源。

background-image + min-height 是最直接的规避方式

把图片从流内元素转为背景，就彻底脱离文档流，不再参与尺寸计算。配合显式 min-height 和 background-size: cover，能保证容器高度始终稳定：

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

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

下载

• min-height 必须设具体值（如 400px），不能用 auto 或百分比（父容器无高时无效）
• background-position: center 防止裁剪偏移引发视觉跳动
• 避免在 grid item 上写 height: 100%——它依赖父容器高度，而 Grid 的 grid-template-rows 若未定义，依然会塌缩

grid-template-columns 中的百分比容易埋雷

你当前用的 repeat(3, 48% 25% 25%) 实际生成 9 列，且所有列宽都依赖容器宽度动态计算。当字体加载或 viewport 变化时，列宽微调可能让文字换行点偏移，间接导致内容高度变化，叠加图片加载就放大 CLS。

• 优先用固定单位（如 fr、px）或明确最大宽度限制
• 若必须响应式，给 .grid-section 加 max-width + margin: 0 auto，避免容器随视口无限拉伸
• grid-gap: 1% 同样受容器宽度影响，建议改用 gap: 16px 这类绝对单位

绝对定位内容层必须配 z-index 和 padding

用 position: absolute 把标题和文字叠在背景图上时，如果没留内边距或层级控制，文字可能被截断或盖住交互区域：

• .content 需设 z-index: 2，确保压在背景图上
• 父容器 div 要加 padding（比如 padding: 40px），否则绝对定位内容会紧贴边缘，移动端易被遮挡
• 避免对 .content 设 top: 0 或 bottom: 0——不同屏幕下位置飘移，反而增加感知偏移

真正卡住 CLS 的从来不是 Grid 语法，而是“以为 Grid 自动管尺寸”的错觉。只要每个 grid item 在 JS 执行前、图片加载前、字体渲染前，就已经有确定的高度和宽度边界，布局就不会抖。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！