如何实现网格项贴容器边框且保持指定间距的布局？

嘿，我太懂你对Bootstrap那套负边距方案的反感了——那种为了实现效果硬凑的hack感，不仅读起来头疼，维护时还容易踩坑。针对你要的「网格项完全贴合容器边框，同时项与项之间保持指定间距」的需求，现在有几个更优雅、更符合现代CSS标准的方案，绝对能解决你的痛点：

方案1：CSS Grid（最推荐，简洁无hack） #

这是目前最完美的解决方案，完全依赖CSS Grid的原生特性，不需要任何奇怪的负边距或者额外的margin处理。

核心代码： #

.grid-container {
  display: grid;
  /* 这里设置列数，比如3列自适应宽度 */
  grid-template-columns: repeat(3, 1fr);
  /* 指定项之间的水平+垂直间距，数值按需调整 */
  gap: 20px;
  /* 不需要任何padding或负边距，网格项自动贴合容器边框 */
}

.grid-item {
  background: #eee;
  padding: 20px;
  /* 不需要额外的margin，gap已经帮我们搞定了项间间距 */
}

为什么好用？ #

• gap（原grid-gap）是Grid原生支持的间距属性，它只会在网格项之间生成间距，容器边缘不会有多余的空隙，完美匹配你的需求
• 代码极简，逻辑清晰，任何人看了都能快速理解
• 响应式调整超简单，只要修改grid-template-columns就行，比如移动端改成2列或者1列：

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

方案2：Flexbox + calc()（兼容旧浏览器） #

如果需要兼容不支持Grid的旧环境（比如IE11），可以用Flexbox配合calc()来实现，同样避免了负边距的hack。

核心代码： #

.flex-container {
  display: flex;
  flex-wrap: wrap;
  /* 不需要负边距！容器边缘完全贴合 */
}

.flex-item {
  /* 3列布局：每列宽度 = 100%/3 - 间距*(总列数-1)/总列数 */
  width: calc(100%/3 - 20px*(2/3));
  background: #eee;
  padding: 20px;
  /* 只给项的右侧和底部加margin，避免边缘出现空隙 */
  margin-right: 20px;
  margin-bottom: 20px;
}

/* 清除每一行最后一个项的右侧margin */
.flex-item:nth-child(3n) {
  margin-right: 0;
}

/* 可选：清除最后一行所有项的底部margin，让容器底部完全贴合 */
.flex-item:nth-last-child(-n+3) {
  margin-bottom: 0;
}

原理说明： #

通过calc()精确计算每个Flex项的宽度，把分摊到每一项的间距从总宽度里减去，再通过nth-child选择器清除最后一列和最后一行的多余margin，既保证了项间的均匀间距，又让边缘完美贴合容器。

对比Bootstrap方案的优势 #

• 完全没有负边距这种hack手段，代码更健壮，不会出现容器溢出导致横向滚动条的问题
• 符合现代CSS规范，语义化更好，后续维护成本极低
• Grid方案几乎不需要额外的适配代码，响应式调整一键搞定

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