如何在CSS GRID中将装订线长度（网格间隙长度）添加到DIV长度？

Question

这是代码-> https://jsfiddle.net/cvgjqkxu/2/

这张照片展示了我想要的结果-> https://i.postimg.cc/1PnnbRBJ/new.png

有时在布局中元素重叠在grid-gap（gutter）上时，如何将网格间距的长度添加到元素长度上？

* {
  margin: 0;
  padding: 0;
}

.l-main {
  /*background: susy-svg-grid() no-repeat scroll;  */
  display: grid;
  grid-gap: 30px;
  padding: 0 30px;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  height: 480px;
}

.l-content {
  order: 2;
  grid-column: 4 / 14;
  background-color: red;
  height: 300px;
}

.l-sidebar {
  order: 1;
  grid-column: 1 / 4;
  height: 300px;
  background-color: green;
}

<main class="l-main">
  <section id="main-content" class="l-content c-content">
    <article class="l-article c-article">
      <header></header>
    </article>
  </section>
  <section id="sidebar" class="l-sidebar"></section>
</main>