:nth-child(n)无法选每行最后一项，因其只按DOM顺序而非视觉行布局匹配；响应式列数变化时失效，需用grid-column-end:-1配合类名或JS动态标记实现。
为什么 :nth-child(n) 不能直接选“每行最后一项”
因为 :nth-child 和 :nth-last-child 都只看 DOM 树中的子元素顺序，完全不感知视觉上的“行”。哪怕你用 grid-template-columns: repeat(4, 1fr) 让每行显示 4 个，HTML 中第 5 个元素在 DOM 里仍是第 5 个子元素——它不会被识别为“第二行最后一项”。所以直接写 :nth-child(4n) 看似合理，但一旦响应式断点改变列数（比如手机端变成每行 2 列），这个选择器就全失效了，且无法动态适配。
用 grid-column-end: -1 + :nth-child 组合定位最后一列元素
真正可控的方式是：让“每行最后一项”在网格中**明确占据该行最右侧的列轨道终点**，再配合选择器筛选。前提是你的列定义固定或可预测（如 grid-template-columns: repeat(4, 1fr)）。
- 给所有网格项设置默认列起始位置：
grid-column-start: auto（或不设，由自动流决定） - 对满足“应位于本行末尾”的项，显式设置
grid-column-end: -1—— 它会强制撑到最后一根列线，即该行最右边界 - 再用属性选择器定位：
[style*="grid-column-end: -1"]或更稳妥地加一个类名如.last-in-row，避免样式覆盖冲突 - 注意：如果使用
auto-fit/auto-fill，列数不固定，-1仍指向隐式网格的最后一列线，但可能跨多行——此时需配合grid-auto-flow: dense和手动控制grid-column范围
响应式场景下改用 JavaScript 动态标记
当列数随屏幕宽度频繁变化（如 repeat(auto-fit, minmax(250px, 1fr)))），纯 CSS 几乎无法可靠识别“每行最后一项”。这时 JS 是更务实的选择：
- 监听
resize和 DOM 变化，调用getComputedStyle(gridContainer).gridTemplateColumns解析当前列数 - 遍历所有网格项，用
element.getBoundingClientRect()获取每个元素的top值，相同top（容差 1px）的归为一行 - 对每组中
right值最大的那个元素添加data-last-in-row属性 - CSS 写
[data-last-in-row] { border-right: 2px solid red; }即可 - 性能提示：避免在
resize中高频重算，用throttle或ResizeObserver替代
justify-self: end 不等于“右对齐最后一项”
很多人试图用 justify-self: end 让某一项靠右，却发现没反应——这通常不是语法错，而是两个硬性条件未满足：
立即学习“前端免费学习笔记（深入）”；
- 目标元素**必须是网格容器的直接子元素**；如果中间嵌套了
<div class="card"><div>content</div></div>，justify-self就失效 - 它所在的列轨道必须有**剩余空间**：比如列定义是
200px 1fr，而内容宽度已 ≥ 200px，那justify-self: end就无处可对齐 - 若想让“每行最后一项”统一右对齐，更可靠的是给它加
margin-left: auto—— 这不受列轨道限制，只要它和同行其他项同属一个网格容器，且未跨列（grid-column: 1 / -1会使其占满整行，margin失效）
