网格：如何将所有免费 space 分配给一列？

Question

我有一个 4 列的网格。它的内容不足以填满所有 space，因此列之间存在一些空白。如何在将所有额外的 space 分配给一列的同时消除所有间隙？ IE。如何删除 1&2 和 3&4 列之间的所有间隙，同时保留 2&3 列之间的间隙？我想要一个灵活的设计，它可以在 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>

Answer 1

创建一个 5 列网格，其中 cenetr 列设置为 auto。这将使中心列占据剩余的 space。然后你可以使用 :nth-child(4n+3) { grid-column: 4 / 5; } 来防止中心列被任何元素填充：

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>

网格：如何将所有免费 space 分配给一列？

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

html

css

css-grid