如何补偿网格列尺寸的间隙？

Question

我认为这是一个常见问题，但仍然找不到答案。请看一下小提琴：

body {
  margin: 0;
}

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 20%;
  gap: 2em;
  background-color: rgba(250, 0, 0, .2);
}

.column {
  background-color: rgba(50, 0, 250, .2);
}

<div class="grid">
  <div class="column">slide 1</div>
  <div class="column">slide 2</div>
  <div class="column">slide 3</div>
  <div class="column">slide 4</div>
  <div class="column">slide 5</div>
  <div class="column">slide 6</div>
</div>

我有一个 x 列的“轮播”网格。我希望只有 5 列（例如）可见，并且它们占用了所有可用空间。其余列应仅在滚动时可见。因此，列大小应为 20%。当我添加间隙时，网格会添加列宽度而不是补偿其宽度。所以我最终发现 5 个元素中的最后一个不完全可见。

我认为这是一个非常常见的问题，也许我可以使用 calc() 调整 cols witdh 。但这让我有点烦恼，感觉很奇怪没有其他更快的解决方案。一定有更好的东西。所以我在这里问:)

Answer 1

使用 calc()，这可以是一个解决方案：

body{ margin: 0; }

.grid{
  --cols: 5;
  --gaps: calc(var(--cols) - 1);
  --gap: 2em;
  
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--gap) * var(--gaps)) / var(--cols));
  gap: var(--gap);
  
  background-color: rgba(250, 0, 0, .2);
}

.column{
  background-color: rgba(50, 0, 250, .2);
}

<div class="grid">
  <div class="column">slide 1</div>
  <div class="column">slide 2</div>
  <div class="column">slide 3</div>
  <div class="column">slide 4</div>
  <div class="column">slide 5</div>
  <div class="column">slide 6</div>
</div>