grid-column和grid-row的起止值按网格线编号书写，如1/3表示跨第1至第3条线（占两列）；负数反向定位；命名线更安全；省略第二值等价auto；justify-items/align-items仅作用于未设justify-self/align-self的子项；gap与margin不可混用；place-items不改变子项尺寸，需设min-width/min-height:0防溢出。
grid-column 和 grid-row 的起止值怎么写才不偏移
网格线编号从容器左上角开始，列线从左到右为 1、2、3…，行线从上到下同理。写 grid-column: 1 / 3 表示跨列线 1 到列线 3（即占两列），不是“从第 1 列到第 3 列”。常见错误是写成 grid-column: 1 / 4 却以为只占 2 栏，实际占了 3 栏。
- 用负数可反向定位：
grid-column: -2 / -1指倒数第二条列线到最右边列线 - 名称比数字更安全：用
grid-template-columns: [start] 1fr [main] 2fr [end]后，直接写grid-column: start / main - 省略第二个值等价于
auto，grid-row: 2等同于grid-row: 2 / auto，但容易导致高度不一致
justify-items 和 align-items 为什么对某些子项没反应
这两个属性只作用于**未显式设置 justify-self 或 align-self 的子项**。一旦某个子项写了 justify-self: end，它就不再继承容器的 justify-items 值。
-
justify-items控制**内联方向**（默认是水平方向）的对齐，align-items控制**块方向**（默认是垂直方向） - 若容器设置了
direction: rtl，justify-items: start会靠右，别硬记“左对齐”，要看逻辑起点 - 在
grid-auto-flow: column场景下，两个轴的角色会互换，此时justify-items实际影响的是垂直位置
gap 和 margin 在 Grid 中混用的坑
gap 是网格容器专属属性，只作用于**网格轨道之间**；而 margin 是子项自己的外边距，在子项自身盒模型上生效。两者叠加会导致间距翻倍或错位。
- 不要给子项设
margin来模拟gap，尤其当有grid-auto-flow: dense时，margin 可能被折叠或破坏重排逻辑 -
gap不支持百分比值，只能用px、rem、em或函数如minmax(1rem, 2vw) - 若需响应式间隙，推荐用
@media分段设置gap，而不是靠子项 margin + calc() 模拟
用 place-items 一键对齐却出现内容截断
place-items: center 是 align-items 和 justify-items 的简写，但它**不改变子项尺寸**。如果子项本身宽高超出网格区域，又没设 overflow 或 max-width，就会被裁剪或撑破布局。
立即学习“前端免费学习笔记（深入）”；
- 常被忽略的前提：确保子项的
min-width: 0和min-height: 0，否则 flex/grid 子项默认不收缩，导致溢出 -
place-items对grid-area跨多格的子项依然有效，但对齐基准是它所占整个网格区域的中心，不是内容盒中心 - 调试时可临时加
outline: 1px solid red到子项，看清它实际占据的网格范围，再判断对齐是否合理
grid-column-end 的值到底是线号、跨度还是名称，得看上下文里有没有定义命名线，而不是背规则。 
