为last-child移除padding后缩略图尺寸不一致该如何修复？

问题根因 #

你遇到的最后一张缩略图偏大的问题来自两个核心原因：

1. 布局结构逻辑错误：你给.gallery-grid设置了两列网格布局，但直接将主图和5个缩略图作为同级子元素放入，实际布局并没有实现「主图在左、所有缩略图在右排列」的预期，反而让缩略图分散到了网格的不同单元格里。
2. 内边距计算逻辑：box-sizing: border-box规则下，元素的内容宽度 = 设置的总宽度 - 内边距 - 边框。前4个缩略图设置了padding-right:10px，内容宽度是20% - 10px，最后一个缩略图没有右内边距，内容宽度就是完整的20%，内部图片按内容宽度100%展示，自然就比其他缩略图大。

最优修复方案（Flex布局实现，无需处理last-child） #

建议放弃浮动+内边距的老旧实现方式，用Flex布局做缩略图容器，代码更简洁，效果更稳定，修改后的完整代码如下：

<style>
.gallery-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 1fr;
  column-gap: 10px;
  row-gap: 30px;
  align-items: start; /* 避免第二列内容被拉伸 */
}
/* 新增缩略图容器样式 */
.thumb-container {
  display: flex;
  gap: 10px; /* 直接控制缩略图间距，无需单独设置内边距 */
}
.image-thumb {
  flex: 1; /* 所有缩略图自动均分容器宽度 */
  width: 0; /* 避免内容撑开元素导致宽度不均 */
}
.image-thumb img {
  width: 100%;
  display: block; /* 消除图片默认底部空白 */
}
</style>    

<div class="gallery-grid">
  <img id="featured-image" src="featured.jpg" style="width:100%">
  <!-- 新增缩略图父容器，把所有缩略图都放进去 -->
  <div class="thumb-container">
    <div class="image-thumb">
      <img src="featured_thumb.jpg" alt="Mountains" onclick="myFunction(this);">
    </div>
    <div class="image-thumb">
      <img src="thumb.jpg" alt="Nature" onclick="myFunction(this);">
    </div>
    <div class="image-thumb">
      <img src="thumb.jpg" alt="Snow" onclick="myFunction(this);">
    </div>
    <div class="image-thumb">
      <img src="thumb.jpg" alt="Lights" onclick="myFunction(this);">
    </div>
    <div class="image-thumb">
      <img src="thumb.jpg" alt="Lights" onclick="myFunction(this);">
    </div>
  </div>
</div>

修改后所有缩略图宽度完全一致，间距均匀，不需要单独处理最后一个元素的样式。

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