3列布局未知数量元素的网格如何移除底部行所有元素的margin-bottom？

方案1：利用布局原生特性（最优解） #

不管你是用Grid还是Flex实现的3列布局，都可以直接放弃用子元素margin-bottom控制行间距，改用布局自带的row-gap属性。该属性天生只会在网格/弹性行之间生成间距，最后一行底部不会产生额外间距，完全不用关心元素总数和最后一行有几个元素。
示例代码：

/* Grid布局示例 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 20px; /* 替代子元素margin-bottom控制行间距 */
  column-gap: 20px; /* 可选，控制列间距 */
}
/* Flex布局示例 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px; /* 替代子元素margin-bottom控制行间距 */
  justify-content: space-between;
}
.flex-item {
  width: 32%;
}

以上两种布局的子元素都不需要额外设置margin-bottom，天然不会出现最后一行底部多余间距的问题。

方案2：兼容必须使用margin-bottom的场景（组合选择器方案） #

如果你的场景没办法改用gap，必须保留子元素的margin-bottom设置，可以用下面这组组合选择器精准匹配所有最后一行的元素，不会误选上一行的内容：

/* 最后一行只有1个元素：匹配最后1个 */
.item:nth-child(3n + 1):last-child {
  margin-bottom: 0;
}
/* 最后一行有2个元素：匹配最后2个 */
.item:nth-child(3n + 1):nth-last-child(2),
.item:nth-child(3n + 2):last-child {
  margin-bottom: 0;
}
/* 最后一行有3个元素：匹配最后3个 */
.item:nth-child(3n + 1):nth-last-child(3),
.item:nth-child(3n + 2):nth-last-child(2),
.item:nth-child(3n + 3):last-child {
  margin-bottom: 0;
}

该方案的原理是利用nth-child的模3规则匹配元素在每行的位置，再结合:nth-last-child、:last-child判断最后一行的元素数量，只会选中真正处于最后一行的元素，适配所有动态数量的场景。

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