如何实现Display Grid：边缘对齐网格行（最后一行项后无间距）？

针对宽度灵活的容器中，让网格行的项均匀分布且边缘对齐的需求，以下是几种可行方案：

• 方案一：Grid原生justify-content: space-between实现
  注意Grid布局下该属性生效的前提是：网格总宽度小于容器宽度。所以不能用1fr这类会强制占满容器的列宽设置，改用auto-fit/auto-fill配合minmax()定义列宽，给space-between留出可分配的空间：
  原生CSS写法：

  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
    justify-content: space-between;
  }
  

  Tailwind对应写法：

  <div class="grid grid-cols-[repeat(auto-fit,minmax(200px,max-content))] justify-between">
    <!-- 网格项内容 -->
  </div>
  

• 方案二：固定列数下的模拟实现
  如果需要固定列数，可通过计算容器内边距配合网格间隙来模拟边缘对齐效果：
  原生CSS写法：

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    gap: 1rem;
    /* 计算左右内边距，让整体居中且边缘对齐 */
    padding: 0 calc((100% - (3 * 200px + 2 * 1rem)) / 2);
  }
  

  这种方法需要手动计算数值，灵活性稍差，适合列数固定的场景。

• 方案三：inline-grid配合父容器对齐
  将网格容器设为inline-grid并占满宽度，再通过父容器的文本对齐属性辅助，同样能实现需求：
  Tailwind写法示例：

  <div class="text-center">
    <div class="inline-grid w-full grid-cols-[repeat(auto-fit,minmax(200px,max-content))] justify-between">
      <!-- 网格项内容 -->
    </div>
  </div>
  

核心要点：Grid的justify-content属性只有在网格整体宽度小于容器宽度时才会生效，所以要避免列宽强制占满容器，给间距分配留出空间。

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