Grid右侧出现黑边框的技术问题求助

我来帮你搞定这个Grid容器右侧黑块的问题——从你的代码和描述来看，这个黑块不是真正的边框，而是容器的黑色背景露出来了，跟你设置的border-right: 0没关系，咱们一步步拆解解决：

问题根源分析 #

你给Grid容器做了两个关键设置：

• grid-template-columns: 120px 120px 120px → 三列总宽度固定为360px
• margin-left:25%; margin-right:25% → 容器宽度是父元素的50%

如果父元素的宽度不是刚好720px（360px ÷ 50%），容器实际宽度就会大于360px，而容器背景是黑色，多出来的这部分宽度就会显示成右侧的黑块。这也是为什么你增加margin-right能临时解决——本质是缩小了容器宽度，让它刚好适配3列的总宽度，但这只是治标不治本。

几种靠谱的解决方案 #

方案1：让容器宽度适配网格列宽（推荐） #

把容器的左右margin换成自动居中，同时设置宽度为fit-content，这样容器会自动贴合三列的总宽度，不会有多余的背景露出来：

.grid-container {
  display: grid;
  grid-template-columns: 120px 120px 120px;
  grid-row-gap: 3px;
  background-color: black;
  border: 3px solid black;
  border-left: 0;
  border-right: 0;
  padding: 0;
  margin: 0 auto; /* 水平居中 */
  width: fit-content; /* 自动适配列总宽度 */
}
.grid-container > * {
  background-color: white;
  border-left: 3px solid black;
}
/* 可选优化：去掉第一个网格项的左边框，避免视觉重复 */
.grid-container > .grid-item:first-child {
  border-left: 0;
}

方案2：让网格列平分容器宽度 #

如果你需要容器保持父元素50%的宽度，那就把固定列宽改成弹性平分，让三列自动填满容器：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列平分容器宽度 */
  grid-row-gap: 3px;
  background-color: black;
  border: 3px solid black;
  border-left: 0;
  border-right: 0;
  padding: 0;
  margin-left: 25%;
  margin-right: 25%;
}
.grid-container > * {
  background-color: white;
  border-left: 3px solid black;
}

方案3：强制容器宽度等于列总宽度 #

如果父元素宽度固定，也可以直接给容器设置固定宽度360px，再配合margin:0 auto居中：

.grid-container {
  display: grid;
  grid-template-columns: 120px 120px 120px;
  grid-row-gap: 3px;
  background-color: black;
  border: 3px solid black;
  border-left: 0;
  border-right: 0;
  padding: 0;
  margin: 0 auto;
  width: 360px; /* 等于三列总宽度 */
}

为什么之前的操作没用？ #

• 你设置border-right:0没用，因为黑块是容器背景，不是边框
• 调整padding只会改变容器内部空间，不影响容器总宽度和背景显示
• 增加margin-right只是缩小了容器宽度，刚好适配列宽，但换个屏幕宽度问题又会出现

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