使用网格布局在列之间添加间隔

Question

我在网格元素之间留出空间时遇到问题。这是我的HTML代码：

<div class="container">

        <div class="col">Hello1</div>

        <div class="col">Hello2</div>

        <div class="col">Hello3</div>

        <div class="col">Hello4</div>

</div>

这是我的CSS代码：

body {
    background-color: green;
}

.col {
    margin: 0 2vw;
    padding: 1vh 1vw;
}

.container {
    width: 80vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    background-color: maroon;
}

我以前使用过这种布局，并且效果还不错，但是由于某种原因，它现在不起作用。我想在四列中的每一列之间留出空间，并使该空间与背景颜色相同（在本例中为绿色）。

Answer 1

使用网格间隙进行间距并将背景色移至网格项而不是网格容器，以便可以看到间隙：

body {
  background-color: green;
}

.col {
  padding: 1vh 1vw;
  background-color: maroon;
}

.container {
  width: 80vw;
  margin: 0 auto;
  display: grid;
  grid-gap:2vw;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

<div class="container">

  <div class="col">Hello1</div>

  <div class="col">Hello2</div>

  <div class="col">Hello3</div>

  <div class="col">Hello4</div>

</div>