grid-gap , column-gap 在没有兄弟姐妹时不起作用答案

【问题标题】：grid-gap , column-gap not working when no sibling is presentgrid-gap , column-gap 在没有兄弟姐妹时不起作用
【发布时间】：2020-05-12 08:21:06
【问题描述】：

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>

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

【问题讨论】：

@Paulie_D 我也只想要最后的差距

标签： html css css-grid

【解决方案1】：

gap 应该是这样工作的。它的空间之间网格行/列等。

由于边距/填充显然不是这里的选项，我可以想到两种可能的解决方案，但可能还有更多。

选项 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>

【讨论】：