Grid: how to give all free space to one column?

Question

I have a grid of 4 columns. It's content is not enough to fill all the space so there are some gaps in-between columns. How do I remove all gaps while giving all extra space to one column? I.e. how do I remove all gaps between 1&2 and 3&4 columns, while living the gap between 2&3 columns? I want a flexible design, which scales when changing width of the table.

div {
  display: grid;
  grid-template-columns: repeat(4, auto);
  width: 100px; /* the rest of the code should not depend on this value!! */
}

How it is:
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</div>

How it should be:
<div>
<span>1</span>
<span>2------------</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6------------</span>
<span>7</span>
<span>8</span>
</div>