CSS Grid 在 SSR 中更稳定，因其静态声明式布局（如 grid-template-areas）可由服务端直接生成确定结构，避免 hydration 重排与 CLS；而 Flexbox 等依赖运行时测量或内容撑开的布局易导致水合偏移。
SSR 中 CSS Grid 布局更稳定，核心不是 Grid 本身“更强”，而是它天然适配 SSR 的静态结构输出逻辑——浏览器拿到的初始 HTML 已经包含完整、确定的网格定义，无需等待 JS 执行或数据加载后再计算布局。
Grid 声明式结构让服务端能预判全部布局
CSS Grid 的 grid-template-columns、grid-template-areas、grid-template-rows 都是静态声明。服务端渲染时，只要这些值不依赖客户端状态（比如不写成 grid-template-columns: ${dynamicCols}），就能在 Node 环境中直接生成确定的 CSS 和 DOM 结构。
对比 Flexbox 或 float 布局：它们常依赖内容尺寸（如 flex: 1 + 不定高子项）或运行时测量（如 JS 计算 offsetWidth 后设 style.gridColumn），这类行为在 SSR 时无法执行，必然留空或出错，导致水合后重排。
- ✅ 推荐写法：
grid-template-areas: "header main" "footer footer"—— 字符串常量，SSR 可直出 - ❌ 危险写法：
grid-template-columns: ${isWide ? '200px 1fr' : '1fr'}—— 若变量未在服务端正确求值，会输出空或非法值 - 服务端需确保所有参与 Grid 计算的 class 名、CSS 变量、内联 style 都已收敛，否则 hydration 阶段会触发 layout shift
Grid 容器不依赖内容撑开，避免 CLS 主要诱因
CLS（累积布局偏移）最常见来源之一，就是容器高度由子元素内容动态撑开。而 Grid 允许你用 grid-template-rows: 60px auto 50px 这类固定+弹性组合，提前锁定主轴空间分配，即使子元素尚未加载或渲染，容器高度也不会跳变。
立即学习“前端免费学习笔记（深入）”；
尤其在卡片列表、仪表盘等场景，Flexbox 容器若只写 display: flex; flex-direction: column，一旦某张卡片图片异步加载完成，就可能突然增高并推挤下方内容；Grid 则可通过 minmax(0, 1fr) 或显式行高约束行为。
- ⚠️ 注意：
auto行高仍可能受内容影响，慎用于关键区域；优先用minmax(200px, 1fr)或固定值 - 若必须响应内容高度（如富文本区块），给该 Grid 项目加
contain: layout，隔离其内部重排不扩散 - 避免在 SSR 模板里留空 Grid 容器（如
<div class="grid"></div>），应至少占位一个骨架节点，防止水合后 DOM 插入引发位移
Grid 子项定位不依赖 JS，消除 hydration 时序差
很多 SSR 布局偏移，实际来自客户端 JS 在 hydration 后才去调用 grid-column 或 grid-area 动态赋值。此时浏览器已按默认文档流渲染了一次，再改 Grid 属性就得重排。
Grid 的优势在于：位置可完全由 class 控制，且 class 可在服务端根据数据状态决定。例如仪表盘不同角色看到不同布局，服务端就能输出 <div class="user-grid admin-layout">，对应 CSS 是：
.admin-layout { grid-template-areas: "header nav main" "footer footer footer"; }
这样客户端 hydration 时只是挂事件，不改布局结构，零重排。
- 避免在 useEffect 或 componentDidMount 里用
el.style.gridColumn = '2 / -1'—— 这类操作必然触发同步 layout - 若需响应式列数变化（如从 2 列切到 3 列），用 CSS 媒体查询 +
grid-template-columns，而非 JS 改 class - React 中不要对每个子项单独设
style={{ gridColumn: index % 3 + 1 }}，这会让服务端与客户端 index 计算稍有差异就错位
真正容易被忽略的是：Grid 容器自身的尺寸边界。如果 SSR 输出的 Grid 父容器没设 height、max-height 或 min-height，而子项又带异步加载内容（如图片、广告 iframe），它仍会持续撑开并引发后续元素跳动——Grid 解决的是“结构可控”，不是“内容不可变”。
