CSS网格中的可变网格间隙

Question

问题

我正在使用CSS网格。
我只想制作grid-gap变量而不更改grid的内部位置。
标签以某种方式不在左侧显示。我也希望这是合理的。

▼换句话说，我想这样做。

---

我想做什么

我怎样才能做到这一点？

---

代码

html { font-size: 62.5%; }
body { display: block; margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; background: transparent; box-sizing: border-box; }  /* reset */

#items {
  display: grid;
  grid-gap: 3.8rem 4.6rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.item {
  text-align: center;
}
.item img {
  max-width: 100%;
  height: auto;
}
.item h2 {
  font-size: 1.6rem;
  margin-top: 1.6rem;
  margin-bottom: 1.5rem;
}
.item p {
  font-size: 1.5rem;
  margin-bottom: .8rem;
}
.item h2, .item p, .item span {
  font-family: 'OsakaBit';
  text-align: left;
}
.item span {
  display: inline-block;
  font-size: 1.1rem;
  border: .1rem solid black;
  border-radius: .3rem;
  margin-right: .6rem;
  margin-bottom: .5rem;
  padding: .3rem;
}

<div id="items">
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210318.png">
      <h2>Title</h2>
      <p>Easy explanation</p>
      <span>tag</span>
      <span>tags</span>
      <span>of</span>
      <span>various</span>
      <span>lengths</span>
      <span>tag</span>
      <span>tag</span>
      <span>tag</span>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210315.png" alt="b" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210313.png" alt="c" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210310.png" alt="d" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210308.png" alt="e" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210354.png" alt="f" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210352.png" alt="g" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210349.png" alt="h" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
  </div>