如何防止在CSS网格中自动放置到边缘列

Question

我正在尝试使用CSS网格实现一个实验性的12列网格系统。我希望将网格外的边距保持为单独的列，以便我可以将边缘列的内容放入其中，这是使用传统网格系统难以实现的功能。

我的问题是CSS网格的自动放置想要将内容放在边距列中。我的第一个想法是为跨越网格所有行的网格边距创建伪元素，但grid-row-end: -1仅适用于显式网格行而不是自动创建的网格行。

有没有办法让网格单元格跨越隐式网格中的所有行，或者阻止自动放置使用边缘列？

注意：该代码段仅适用于最新版本的Chrome，FF和Safari。

.grid {
  background-color: #ccc;
  margin: 1em 0;

  display: grid;
  grid-auto-flow: row;
  grid-template-columns: [main-start] 1em [content-start] repeat(12, 1fr) [content-end] 1em [main-end];
  grid-gap: 1em;
}

.grid__col-12 {
  grid-column: span 12;
}

.grid__col-6 {
  grid-column: span 6;
}

.grid__col-4 {
  grid-column: span 4;
}

.grid::before {
  content: '';
  display: block;
  grid-column: main-start / content-start;
  grid-row: 1 / -1; /* Doesn't work */
  background-color: #ffeeee;
}

.grid::after {
  content: '';
  display: block;
  grid-column: content-end / main-end;
  grid-row: 1 / -1; /* Doesn't work */
  background-color: #ffeeee;
}

.grid.faked::before, .grid.faked::after {
  grid-row: 1 / 4; /* Hardcoded for line amount */
}

.col {
  background-color: #fff;
  padding: 1em;
  border: 1px solid #999;
}

<p>What I want:</p>
<div class="grid faked">
  <div class="col grid__col-12">12</div>
  <div class="col grid__col-6">6</div>
  <div class="col grid__col-6">6</div>
  <div class="col grid__col-4">4</div>
  <div class="col grid__col-4">4</div>
  <div class="col grid__col-4">4</div>
</div>

<p>What I got:</p>
<div class="grid">
  <div class="col grid__col-12">12</div>
  <div class="col grid__col-6">6</div>
  <div class="col grid__col-6">6</div>
  <div class="col grid__col-4">4</div>
  <div class="col grid__col-4">4</div>
  <div class="col grid__col-4">4</div>
</div>