当网格项达到max-width时，如何均匀调整其他项的间距？

当盒子2和3达到它们的max-width时，均匀间距表现正常，因为它们最先达到该值。但盒子1和4仍未达到自身的max-width，这会导致调整容器尺寸时出现怪异的间距效果。

请问有没有办法在任意网格项开始自动调整自身尺寸（本例中为2和3）后，开始均匀调整所有项之间的间距？

期望效果 #

当盒子宽度小于150px时，保持10px间距；一旦任意盒子达到150px，保持两端间距不变，同时均匀拉开盒子之间的间距。

原代码示例 #

CSS #

.grid-container {
  display: grid;
  height: 100%;
  grid-template-columns: 15% 25% 25% 15%;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  justify-content: center;
  align-content: space-evenly;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  max-width: 150px;
}

HTML #

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

解决方案 #

方法一：媒体查询+固定列宽 #

先计算断点宽度：当中间列（原25%宽度）达到150px时，容器总宽度为150px / 0.25 + 2*10px（左右padding） + 3*10px（gap）= 650px。在该断点以上，将列宽按原比例固定，同时通过justify-content: space-between让盒子间的间距自动均匀分配。

修改后的CSS代码：

.grid-container {
  display: grid;
  height: 100%;
  grid-template-columns: 15% 25% 25% 15%;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  justify-content: center;
  align-content: space-evenly;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  max-width: 150px;
}

/* 断点：容器宽度足够让中间列达到150px时触发 */
@media (min-width: 650px) {
  .grid-container {
    /* 按原15%/25%的比例，计算固定宽度：150px * 0.6 = 90px */
    grid-template-columns: 90px 150px 150px 90px;
    justify-content: space-between;
    gap: unset; /* 取消固定gap，让间距自动分配 */
  }
}

方法二：无媒体查询（使用clamp函数） #

通过clamp()函数动态定义列宽，最小为原百分比，最大为对应固定值，配合justify-content: space-between实现自动适配，无需媒体查询。

修改后的CSS代码：

.grid-container {
  display: grid;
  height: 100%;
  /* clamp(最小值, 自适应值, 最大值)，按原比例对应最大宽度 */
  grid-template-columns: clamp(15%, auto, 90px) clamp(25%, auto, 150px) clamp(25%, auto, 150px) clamp(15%, auto, 90px);
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  justify-content: space-between;
  align-content: space-evenly;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

两种方法都能实现需求：容器较小时按百分比分配列宽、保持10px间距；当任意盒子达到150px后，固定列宽并均匀拉开盒子间的间距，同时保留两端的padding。

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