justify-items 和 align-items 分别控制网格项在单元格内水平与垂直的默认对齐，justify-self 和 align-self 可单独覆盖；place-items 是二者的简写，对齐以所在网格区域为基准，注意 rtl 与 margin 陷阱。
用 justify-items 和 align-items 控制所有项目在各自单元格内的默认对齐方式，它们分别管水平（行内轴）和垂直（块轴）方向；若要单独调整某个项目，就用 justify-self 或 align-self 写在那个子元素上。
容器级统一设置：justify-items 与 align-items
这两个属性写在 grid 容器上，影响所有未显式设置 self 属性的子项：
-
justify-items：控制水平方向对齐（默认是左对齐 start），可选值有
start、center、end、stretch（拉满宽度，默认行为） -
align-items：控制垂直方向对齐（默认也是
stretch），可选值同上 - 例如：
justify-items: center; align-items: start;让所有项目水平居中、顶部对齐
单个项目覆盖：justify-self 与 align-self
当某个网格项需要和其他项不一样时，在它自身上加属性即可，会直接覆盖容器级设置：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
justify-self: end;→ 该项目靠右，其他仍按justify-items走 -
align-self: flex-end;→ 该项目底部对齐（注意：flex-end在 Grid 中也有效） - 支持独立写，比如只改水平不改垂直，或反过来
简写方案：place-items
想一步到位设默认对齐，可用 place-items：
-
place-items: center;等价于同时设justify-items: center;和align-items: center; - 但要注意：它不会限制子项尺寸，如果内容宽高超出单元格，可能溢出或被裁剪
- 建议搭配
min-width: 0; min-height: 0;使用，尤其内部含图片或嵌套 Flex 时
对齐基准与常见陷阱
对齐始终以“所在网格区域”为参考框，不是内容本身：
- 跨多格的项目（如
grid-column: 1 / 4;），对齐中心是它占的整个矩形区域的中心 - 写了
justify-self的项目，justify-items对它完全无效 - 容器设了
direction: rtl时，start实际靠右，别死记物理方向 - 避免和 margin 混用：gap 是轨道间距，margin 是子项外边距，叠加会导致空隙翻倍
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
