Using grid-template-columns, collapse a grid cell when empty

I'm setting up a grid using grid-template-columns. Data is going to be dynamically filling these columns and occasionally one of the cells might have no data. In this case I want to merge the cell with the one next to it.

Is this possible?

Here's a code example of my setup:

<style>
  #container {
  display: grid;
  grid-template-columns: fit-content(100px) fit-content(300px) 1fr;
  grid-gap: 5px;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
  }
  
  article {
  display: contents;
  }

  article > div {
  background-color: #8ca0ff;
  padding: 5px;
  }
</style>

<div id="container">
  <article>
    <div>
      This is a first field
    </div>
    <div>
      This is a second field with some other content
    </div>
    <div>Flexible item</div>
  </article>
  
  <article>
    <div>
      This is a first field
    </div>
    <div>
      <!-- Empty, merge with 1st field on the left -->
    </div>
    <div>Flexible item</div>
  </article>
  
  <article>
    <div>
      This is a first field
    </div>
    <div>
      This is a second field with some other content
    </div>
    <div>Flexible item</div>
  </article>
</div>

Codepen here: https://codepen.io/Daggett/pen/GRObEZG