clumping the gaps in a CSS grid - css-grid

Question

So I have a bunch of stuff in a grid. The following is an extremely reduced example, but demonstrates the issue. The actual grid items have "natural content" sizes, but here I have given them various specific widths in px. The background colors show the (simulated) content width of the grid items. In row 2, the items are large and span 3 grid columns. In row 1, the items are shorter, so the grid algorithm adds gaps between items.
Remembering that the sizes are actually based on content, and are unknown to the HTML & CSS, I would like to control where the grid algorithm places the gaps. As an example, let's say that I would like the gaps for items 1-3, to all be between items 2 and 3, with item 1 left aligned (as it is) with item 11, item 2 juxtaposed with item 1, then a gap, and then item 3 to be right-aligned. This can be achieved by uncommenting the first grid-template-columns rule.
Now let's say that I would INSTEAD like the gaps for items 4-6 to be between items 4 and 5. This can be achieved by uncommenting the second grid-template-columns rule.
Now here is the question: is there a different technique that can be used to achieve control over both of these gaps? Uncommenting the third grid-template-columns rule demonstrates that this technique can only be used in one spot per grid, because the gap sizes are different for the two cases, and it introduces gaps in row 2, which is not wanted.
.gr
{
display:grid;
width:max-content;
grid-auto-columns:max-content;
/* grid-template-columns:auto 1fr repeat( 8, auto ); */
/* grid-template-columns:repeat( 4, auto ) 1fr repeat( 5, auto ); */
/* grid-template-columns:auto 1fr repeat( 2, auto ) 1fr repeat( 5, auto ); */
/* grid-template-columns:auto 1fr repeat( 2, auto ) ??? repeat( 5, auto ); */
}
.wide
{
grid-column:span 3;
grid-row: 2;
}
.w1
{
width:125px;
background-color:yellow;
}
.w2
{
width:110px;
background-color:palegreen;
}
.w3
{
width:140px;
background-color:yellow;
}
.w4
{
width:75px;
background-color:palegreen;
}
.a
{
background-color:red;
grid-row: 1;
width:20px;
}
.b
{
background-color:green;
grid-row: 1;
width:30px;
}
.c
{
background-color:purple;
grid-row: 1;
width:40px;
}
.d
{
background-color:lightblue;
grid-column:span 3;
grid-row: 1;
width:100px;
}
<h1>grid gaps</h1>
<div class=gr>
<div class=a>1</div>
<div class=b>2</div>
<div class=c>3</div>
<div class=c>4</div>
<div class=a>5</div>
<div class=b>6</div>
<div class=d>7</div>
<div class=b>8</div>
<div class=c>9</div>
<div class=a>10</div>
<div class="wide w1">11</div>
<div class="wide w2">12</div>
<div class="wide w3">13</div>
<div class="wide w4">14</div>
</div>