CSS Grid技术咨询：如何为网格的指定行（如第二行）设置外边距？

你遇到的问题很典型——直接给第二行的.item元素加外边距会破坏Grid的轨道布局，因为Grid的行轨道高度是基于内容自动调整的（你用了1fr，两行轨道高度会保持一致），当你给第二行的item加margin时，会强行拉宽行轨道的高度，导致第一行的布局也跟着错位。

下面是两种可行的解决方案：

方案一：给第二行元素设置margin-top并固定对齐方式 #

这种方法不需要修改Grid容器的结构，只需要针对第二行的item调整对齐方式，避免它们撑开轨道高度：

/* 选中第4到第6个item，也就是第二行的所有元素 */
.item:nth-child(n+4) {
  margin-top: 20px; /* 替换成你想要的外边距大小 */
  align-self: start; /* 让元素靠轨道顶部对齐，不拉伸轨道高度 */
}

解释：默认情况下Grid item会拉伸填充整个轨道高度，设置align-self: start后，item会保持自身的146px高度，margin-top只会让元素在轨道内向下偏移，不会影响轨道本身的高度，这样第一行的布局就不会错乱了。

方案二：调整Grid容器的行轨道间距（适合需要增大行间距的场景） #

如果你其实是想让两行之间的间距比默认的gap:14px更大，直接修改Grid容器的行间隙会更简单，不需要单独给元素加margin：

.wrapper {
  /* 把原来的gap拆分成列间隙和行间隙，单独增大行间隙 */
  column-gap: 14px;
  row-gap: 34px; /* 原来的14px + 你想要额外增加的20px */
}

这种方法更符合Grid布局的设计逻辑，因为Grid的gap属性就是用来控制轨道之间的间距的，不会破坏布局流。

为什么你之前的方法会出错？ #

你用:nth-child选择第二行元素加margin时，没有设置align-self，导致item的总高度（146px + margin）撑开了Grid的行轨道。因为你设置了grid-template-rows: repeat(2,1fr)，两行轨道会平分可用空间，当第二行轨道被撑高时，第一行轨道也会跟着变高，第一行的item会在更高的轨道里居中，视觉上就出现了错乱。

内容的提问来源于stack exchange，提问作者kkkkkkkkkkkkkkkkk