Auto fill grid container with one item full width leaving no gaps

I'm trying to have a grid container which contains items which are either one cell wide or full width. But using auto fill to make sure there are no gap regardless of the order of the markup.

Take this example:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item full-width"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

With the CSS being:

.container {
    display: grid;
    grid-template-columns: 60px 60px 60px;
    grid-template-rows: 30px 30px 30px 30px;
    grid-gap: 1rem;
}

.item {
    background: red;
}

.full-width {
    background: green;
    grid-column: 1/4;
}

It renders like this: grid container

I would like to achieve this

And if number 6 was full width it would render like this

Any ideas? If this requires a JS solution then could you give me some points on that too?

Many thanks.