先记住这个答案
justify-items 与 align-items 控制每个网格项目如何放在自己的网格区域内，分别对应行内轴与块轴。初始值是 normal；普通可拉伸项目通常看起来像 stretch，填满可用空间。但图片等有固有尺寸或纵横比的项目可能按 start 一类行为放置，不会无条件被拉扯。baseline 则让同一对齐上下文中的文字基线对上，而不是把卡片底边排齐。
- 两个属性控制项目在格子内部的位置
- 默认是
normal，常表现为拉伸 - 有固有尺寸的项目可能不拉伸
baseline对齐文本基线
格子比内容大时才看得清
假设一行高 160px，按钮本身高 40px。align-items: start 将按钮放在区域的块轴起点，center 居中，end 靠终点。justify-items 在另一轴做类似选择。若项目已经被拉伸至铺满区域，就看不出“居中”移动了多少；改为不拉伸后对齐效果才明显。
.tiles {
display: grid;
grid-template-columns: repeat(2, 180px);
grid-auto-rows: 160px;
justify-items: center;
align-items: center;
}
.tiles > .feature { align-self: start; }
/* feature 只覆写自己的块轴对齐 */align-self 与 justify-self 可以单独覆写某个项目，不必让整组卡片一起变化。若项目本身设置了明确宽高，对齐时它保持自己的尺寸；若没有明确尺寸，还应检查该项目是否可被拉伸、是否有自动外边距。
基线对齐适合文字不同高的卡片
两个标题分别用不同字号时，顶边对齐会显得文字落点不齐。设置 align-items: baseline 可让参与同一行基线对齐的项目以文字基线为参照。它不是把盒子底部压到同一线，也不保证每一行内容的最后一行对齐；不同内容没有可用的文本基线时还会使用替代基线规则。
方向要按逻辑轴理解。通常横排文字下，行内轴近似水平、块轴近似垂直；换成其他 writing-mode 后，不应机械地把 justify-items 永远说成“水平居中”。这也是面试里比死记横竖更准确的表述。
假设每个网格单元都是 200px 宽、120px 高，按钮只有 80px 宽，justify-items: center 会在单元内部水平居中它；若项目默认拉伸填满单元，单改对齐值后的差异可能被项目尺寸掩盖。基线对齐则适合两张卡片标题字号不同的场景，让文字落在共同基线上；它依据文本基线而非盒子顶部，图片和无文字项目还会涉及回退规则。
容易答错的地方
- 说默认值就是
stretch - 规范初始值是
normal，它在普通网格项目上经常表现为拉伸；有固有尺寸的项目存在例外。 - 把
align-items当作整组轨道对齐 - 它移动格子里的项目。轨道组相对容器的多余空间由
align-content等属性处理。
面试官还会怎么问？
只想让一张卡片靠底怎么写？
对那张项目设置 align-self: end，保留其他项目的容器级对齐。
为什么图片没有被默认拉满格子？
图片有固有尺寸或纵横比，normal 不一定表现为强制拉伸，避免画面被扭曲。
baseline 和 end 的差别是什么？
前者按内容的排版基线对齐，后者按网格区域块轴终点对齐，文字尺寸不同时结果会不同。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。