grid-column: span creates extra columns

I am quite new to CSS Grid. I have a simple gallery where the column of the items is unknown.

I have the following CSS for the parent:

.gallery {    
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
    grid-auto-flow: dense;
    grid-gap: 1px;
}

And the items in the gallery can have classes which take multiple columns, for example:

.grid-col-2 {
    grid-column: span 2;
}

But I am having a problem. When the browser is resized (or in mobile) if there is space for only one column (width below 600px in my case), the grid-column breaks the layout, and instead of having one column only, there are 2, and the second column is not sized properly.

Now the first thing that came in my mind is to create a media rule saying if the width is below 600px, instead use grid-column: 1 / -1. But this bring me on another problem (with no solution afaik), the gallery will not necessarily be 100% the width of the window, and there are no media rules that are based on the width of the parent.

Here is an image showing what is happening:

And here is a fiddle of the same: https://jsfiddle.net/pynd13bv/

Is there a way to tell the Grid not to create extra columns because of grid-column, but instead to just take one full row without breaking the layout?