Как добавить длину желоба (длина сетки) к длине DIV в CSS GRID?

Question

Это код -> https://jsfiddle.net/cvgjqkxu/2/

На этой картинке представлен мой желаемый результат -> https://i.postimg.cc/1PnnbRBJ/new.png

Бывают случаи, когда в макете элемент перекрывает сетку(сточная канава), как добавить эту длину сетки к длине элемента?

* {
  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>