css - 填充网格容器，以便最后一个网格元素区域始终被填充

Question

现在我有一个包含1行和5列的网格，我将使用它作为导航链接，但在某些页面上有可能网格容器可能没有 5 个子容器。

问题是网格从第一个可用区域开始填充。

有没有办法用网格项填充网格容器，以便最后一个区域始终被填充？

例如...

[a][b][c][d][ ] 应该是 [ ][a][b][c][d]

[a][b][c][ ][ ] 应该是 [ ][ ][a][b][c]

值得注意的是，我不想反转元素的方向，而是始终保持元素的顺序相同。

是否有一种简单方法可以不修改列数来执行此操作？

Answer 1

由于它只有 5 列，因此您可以使用 nth-last-child() 为每个元素显式定义它

.grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-gap:5px;
  margin:5px;
}
.grid > span {
  padding:10px;
  background:yellow;
  
}

.grid > span:nth-last-child(1) { grid-column:5; }
.grid > span:nth-last-child(2) { grid-column:4; }
.grid > span:nth-last-child(3) { grid-column:3; }
.grid > span:nth-last-child(4) { grid-column:2; }
/*.grid > span:nth-last-child(5) { grid-column:1; } this one is not needed*/

<div class="grid">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
</div>

<div class="grid">
<span>a</span>
<span>b</span>
</div>

<div class="grid">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
</div>

或者考虑一下 Flexbox，这样会更容易:

.grid {
  display:flex;
  margin:5px;
  justify-content:flex-end;
}
.grid > span {
  padding:10px;
  background:yellow;
  width:calc(20% - 10px);
  margin:5px;
  box-sizing:border-box;
}

<div class="grid">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
</div>

<div class="grid">
<span>a</span>
<span>b</span>
</div>

<div class="grid">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
</div>

---

CSS 网格的另一个想法，其中语法可以更直观，并且可以轻松地扩展到任意数量的列:

.grid {
  display:grid;
  grid-template-columns:repeat(var(--n,5),1fr);
  grid-gap:5px;
  margin:5px;
}
.grid > span {
  padding:10px;
  background:yellow;
  
}

.grid > span:nth-last-child(1) { grid-column-end:-1; }
.grid > span:nth-last-child(2) { grid-column-end:-2; }
.grid > span:nth-last-child(3) { grid-column-end:-3; }
.grid > span:nth-last-child(4) { grid-column-end:-4; }
.grid > span:nth-last-child(5) { grid-column-end:-5; }
.grid > span:nth-last-child(6) { grid-column-end:-6; }

/*.grid > span:nth-last-child(n) { grid-column-end:-n; }
  and so on ...
*/

<div class="grid">
<span>a</span>
<span>b</span>
<span>c</span>
</div>
<div class="grid" style="--n:4">
<span>a</span>
<span>b</span>
<span>c</span>
</div>

<div class="grid" style="--n:3">
<span>a</span>
<span>b</span>
</div>

<div class="grid" style="--n:6">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
</div>