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

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>

CodePudding user response：

Create a 5 column grid where the cenetr column is set to auto. This will make the center column occupy the remaining space. Then you can use :nth-child(4n 3) { grid-column: 4 / 5; } to prevent that the center column is filled with any elements:

div {
  display: grid;
  grid-template-columns: min-content min-content auto min-content min-content;
}

div > span:nth-child(4n 3) {
  grid-column: 4 / 5;
}

<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>