如何让响应式元素对齐网格且不显示部分空单元格？

嘿，我完全懂你要解决的问题——固定50px宽高的网格单元格，要让父容器严格对齐单元格的整数倍宽度，绝不露出半截空单元格，还得支持在单元格里放绝对定位的元素，全程纯CSS不能碰JavaScript。其实用现代CSS Grid就能完美搞定，你之前没成功大概率是没用到精准的属性组合，咱们一步步来：

核心思路 #

要解决这个问题，关键就是让父容器的宽度严格等于50px的整数倍，同时保持响应式适配不同屏幕。CSS Grid的repeat(auto-fill, <固定尺寸>)属性刚好能实现这个效果，它会自动根据可用空间生成最多的固定列数，容器宽度会自动适配列的总宽度，不会出现剩余空间导致的“部分空单元格”问题。同时我们还要保留你原来的左右蓝色侧边效果，并且确保单元格支持内部绝对定位。

完整代码实现 #

CSS部分 #

.mid {
  background: url('http://via.placeholder.com/50/ff0000/ffffff?text=X') repeat;
  display: grid;
  /* 自动填充50px宽度的列，确保容器宽度是50px的整数倍 */
  grid-template-columns: repeat(auto-fill, 50px);
  /* 让网格在可用空间内居中，也可以换成justify-content: start/end按需调整 */
  justify-content: center;
  box-sizing: border-box;
  padding: 0 10px; /* 用padding代替原来的margin，方便伪元素定位 */
  position: relative;
}

.mid::before, .mid::after {
  background: #0000ff;
  content: "";
  position: absolute;
  bottom: 0;
  top: 0;
  width: 10px;
}

.mid::before {
  left: 0; /* 因为容器有padding，伪元素定位在容器左侧边缘 */
}

.mid::after {
  right: 0; /* 同理定位在右侧边缘 */
}

.slot {
  background: url('http://via.placeholder.com/50/00ff00/000000?text=Y');
  height: 50px;
  width: 50px;
  position: relative; /* 关键！添加这个，让内部元素可以绝对定位 */
}

/* 示例：在slot里加一个绝对定位的元素，验证功能 */
.slot .inner {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(255,255,255,0.8);
  padding: 2px 5px;
  font-size: 12px;
}

HTML部分 #

<div class="mid">
  <div class="slot"><div class="inner">1</div></div>
  <div class="slot"><div class="inner">2</div></div>
  <div class="slot"><div class="inner">3</div></div>
  <div class="slot"><div class="inner">4</div></div>
  <div class="slot"><div class="inner">5</div></div>
  <div class="slot"><div class="inner">6</div></div>
  <div class="slot"><div class="inner">7</div></div>
  <div class="slot"><div class="inner">8</div></div>
  <div class="slot"><div class="inner">9</div></div>
  <div class="slot"><div class="inner">10</div></div>
  <div class="slot"><div class="inner">11</div></div>
  <div class="slot"><div class="inner">12</div></div>
  <div class="slot"><div class="inner">13</div></div>
  <div class="slot"><div class="inner">14</div></div>
  <div class="slot"><div class="inner">15</div></div>
</div>

为什么这个方案可行？ #

• 无部分空单元格：repeat(auto-fill, 50px)会让Grid容器自动计算能容纳的最多50px列数，容器宽度会精确等于列数 × 50px，绝不会出现剩余空间导致的“半截空单元格”。
• 支持绝对定位：给.slot加上position: relative之后，内部元素可以用position: absolute精准定位，完全满足你的需求。
• 保留原有视觉效果：通过padding: 0 10px配合伪元素的left:0/right:0，完美还原了你原来的左右蓝色侧边效果，比原来的负margin定位更稳定。
• 纯CSS响应式：不需要任何JavaScript，屏幕宽度变化时，Grid会自动调整列数，容器宽度始终保持50px的整数倍。

补充说明 #

如果你希望容器左对齐而不是居中，只需要把justify-content: center改成justify-content: start就行；如果要右对齐就改成justify-content: end，完全按需调整。

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