Grid容器需设min-height或height才能实现底部对齐；用grid-template-rows:1fr auto配合align-items:end或align-self:end，注意justify-self控制水平而非垂直方向，grid-row定位需区分网格线与轨道。
grid-template-rows 配合 minmax() 或 fr 单位才能撑满容器高度
Grid 默认不会让容器“有高度”，如果父容器没设 height 或 min-height，align-items: end 或 justify-self: end 都会失效——元素只是按内容高度堆叠，底部对齐无从谈起。
必须先让网格容器具备明确的可用高度空间：
- 给容器加
min-height: 100vh（常见于全屏布局）或固定值如height: 400px - 用
grid-template-rows: 1fr auto让最后一行“吸底”，其中auto行放目标元素 - 避免只写
grid-template-rows: auto——它不会分配剩余空间，align-items: end依然无效
align-items: end 是最简方案，但仅适用于所有子项统一底部对齐
如果容器里只有一个需要到底部的元素，且你希望它随内容自然换行、不拉伸，align-items: end 比手动定位更轻量。
但它会影响所有直接子项：只要没显式设置 align-self，它们都会被挤到容器底边线对齐。
- 适用场景：
footer在卡片底部、登录表单中按钮沉底 - 慎用场景：容器内还有标题、描述等需顶部对齐的内容
- 替代方案：给目标元素单独加
align-self: end，其他元素保持默认或设align-self: start
justify-self: end 在单列 Grid 中容易误以为“水平居右”，实际是横向对齐
新手常混淆 justify-self 和 align-self：前者控制**行内轴（inline axis）**，即左右方向；后者控制**块轴（block axis）**，即上下方向。在默认 grid-auto-flow: row 下，想让元素到底部，该用 align-self: end，不是 justify-self: end。
-
justify-self: end的效果是“贴右”，和text-align: right类似，和垂直位置无关 - 若网格是
grid-auto-flow: column，那justify-self: end才会表现为“贴底”——此时行内轴已变成垂直方向 - 检查
direction和writing-mode也可能翻转轴向，但绝大多数项目不用动它们
grid-row 起止线定位适合精确控制，但需避免轨道数错位
当容器有多行定义（比如 grid-template-rows: 100px 1fr 60px），用 grid-row: 3 / -1 可让元素跨到最后一个轨道，再配合 align-self: end 实现底部吸附。
但轨道编号容易出错：负索引从 -1 开始计数的是**网格线（grid line）**，不是轨道（track）。三行定义共产生 4 条线，底边线是 -1，倒数第二条是 -2。
- 安全写法：
grid-row: -2 / -1表示“倒数第二条线到倒数第一条线之间”，即最后一行轨道 - 如果只写
grid-row: -1，等于grid-row: -1 / -1，元素没高度，看不见 - 动态内容导致行数变化时，基于线号的写法比基于名称（
grid-row: footer）更稳定，前提是线号逻辑清晰
事情说清了就结束。底部对齐看着简单，真正卡住人的从来不是属性名，而是容器有没有高度、轴向有没有被 flow 或 writing-mode 悄悄调转、以及 grid line 编号到底是从哪头开始数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
