Grid 布局天然支持行列对齐，因其二维结构可精确控制行列线；grid-template-columns 固定列宽保障表格列稳定对齐；justify-self/align-self 支持单格微调，align-content: start 实现行顶对齐。
Grid 布局天然支持行列对齐，不用 hack 就能对齐表格式内容
因为 Grid 是二维系统，直接按行轨道和列轨道划分空间，每个网格项的位置由明确的行列线控制，不像 Flexbox 那样只能沿一个轴“推挤”——表格型信息（如多组「标题 + 值」对）天然需要列对齐（标签左对齐、数值右对齐）、行对齐（各组高度一致），Grid 的 grid-template-columns 和 justify-items/align-items 能一次性约束整列/整行的行为。
用 grid-template-columns 固定列宽比浮动布局更稳
表格类展示最怕列宽随内容伸缩导致错位。比如「姓名」「年龄」「城市」三列，如果只用 display: flex，某条数据的姓名超长就会撑开整行，后面所有列都偏移。而 Grid 可以写：grid-template-columns: 120px 60px 1fr，第一列强制 120px，第二列固定 60px，第三列填剩余空间——所有行共享同一套列定义，对齐自然稳定。
- 避免用
minmax(0, 1fr)或auto做关键列，它们会响应内容宽度，破坏对齐 - 如果需要响应式，优先改用媒体查询重设
grid-template-columns，而不是靠flex-wrap换行 -
gap替代margin控制间距，防止子元素 margin 合并或干扰轨道计算
justify-self 和 align-self 能逐项微调对齐，不污染全局
表格里常有混合对齐需求：标签左对齐、数字右对齐、图标居中。Flexbox 下得给每类加 class 再设 margin-left: auto 或 text-align，容易漏或冲突；Grid 中可以直接在单个格子上写：justify-self: end（右对齐）、align-self: center（垂直居中），且不影响其他项。
- 注意：这些属性只对直系 grid item 生效，嵌套容器需另行设置
- 若整列统一行为，优先用容器级
justify-items: end，性能更好、代码更短 -
justify-self: stretch是默认值，显式声明反而可能覆盖父容器设置
自动行高对齐靠 align-content: start 而不是内容撑开
表格行高不一致时（比如某行文本换行、某行只有单行文字），Flexbox 往往让整行被最高项拉伸，导致文字基线错位；Grid 默认 align-content: stretch，但只要设成 start，所有行就按自身内容顶部对齐，视觉上更像传统 HTML 表格。
立即学习“前端免费学习笔记（深入）”；
- 别依赖
height或min-height强制统一行高，易引发溢出或滚动条 - 如果需等高，用
align-items: stretch（默认），但要确保子元素没设align-self: start覆盖它 - 真正影响对齐的是容器的
align-content（多行之间）和 item 的align-self（单个 item 在单元格内），二者作用层级不同，别混用
