如果某个项目达到其最大宽度，则调整其他项目的网格间隙

Question

当盒子 2 和 3 到达其

max-width

时，均匀间距效果很好，因为它们首先到达。但盒子 1 和 4 仍在等待到达它们的

max-width

。

这会导致调整大小时间隙间距看起来很奇怪。在任何项目开始自动调整后，是否有任何解决方法可以开始均匀调整间隙间距？ （在本例中为 2 和 3）

.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;
}

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

Answer 1

如果你明确告诉它有最大宽度，网格看起来会更快乐。

此代码片段通过在 grid-template-columns 属性中设置 min(15%, 150px) 和 min(25%, 150px) 来实现此目的，而不是在各个子项上设置 max-width。

.grid-container {
  display: grid;
  height: 100%;
  grid-template-columns: min(15%, 150px) min(25%, 150px) min(25%, 150px) min(15%, 150px);
  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;
}

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