Ignore divs surrounding grid cells in display: grid

I have a grid-layout with 3 children, each spanning 4 out of 12 columns, to create a horisontal 3 column layout. A simplified example can be seen here: https://jsfiddle.net/bnyy6fde/1/.

<div class="grid">
  <div class="grid-cell">
    <h3>Grid element 1</h3>
  </div>
  <div class="grid-cell">
    <h3>Grid element 2</h3>
  </div>
  <div class="grid-cell">
    <h3>Grid element 3</h3>
  </div>
</div>

My CMS wraps each child in a div, which causes the grid layout to render incorrectly. This can be seen here, demonstrated by the div with class 'not-working': https://jsfiddle.net/e6b2yf37/2/.

<div class="grid">
  <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 1</h3>
    </div>
  </div>
  <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 1</h3>
    </div>
  </div>
  <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 1</h3>
    </div>
  </div>
</div>

Depending on the editor's setup, the number of columns can span from 1 to 4 elements per row. As such, it is not possible to simply solve this, by giving the div, 'not-working', grid-column-end: 4.

It is not possible to remove the divs wrapping each child in the CMS.

Is there a pure CSS-solution, which simply ignores the div 'not-working' regardless of the number of columns the children span?