为什么 `gap` 将像素添加到网格容器中行的末尾？

Answer 1

gap 会向网格的总宽度添加额外的空间，这可能会导致溢出并在可滚动区域的右侧创建额外的空间，特别是当项目数小于

grid-template-columns

中指定的列数时。

为此，请使用

grid-template-columns

与

1fr

和

grid-auto-flow

与

column

的组合，因此这将创建一个响应式网格，该网格根据容器宽度调整列数，并且网格项填充在按列方式。

.container {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 grid-auto-flow: column;
 max-width: 400px;
 overflow-x: auto;
 gap: 10px;
  background: cyan;
}

.gap-10 {
  gap: 10px;
}

.item {
  background-color: navy;
  width: 100px;
  aspect-ratio: 1 / 1;
}

.item:nth-of-type(2n) {
  background-color: red;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container gap-10">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>