grid-gap，当没有同级时，列间隙不起作用

Question

css网格间隙似乎仅在右侧或下方有兄弟姐妹时才起作用。

请参见下面的示例

.wrapper {
  display: grid;
  grid-gap: 20px 20px;
  border:2px solid yellow
}



.wrapper > div {
  border:2px solid green;
}

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

如何在右侧留出空间，没有任何边距或填充，而仅使用网格间隙。

Answer 1

这就是gap的工作方式。用于空格between网格行/列等

由于在此处似乎无法选择边距/填充，所以我可以想到两种可能的方式，但可能还会更多。

选项1

使用calc调整div的宽度。

.wrapper {
  display: grid;
  grid-row-gap: 20px;
  border: 2px solid yellow
}

.wrapper>div {
  border: 2px solid green;
  width: calc(100% - 20px);
}

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

选项2

添加第二个未使用的列。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 20px;
  grid-row-gap: 20px;
  border: 2px solid yellow
}

.wrapper>div {
  border: 2px solid green;
  grid-column: 1;
}

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>