Css 填充网格容器，以便始终填充最后一个网格项区域

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

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

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

例如

[a][b][c][d][]

应该是

[][a][b][c][d]

[a][b][c][][]

应该是

[]][a][b][c]

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

---

是否有一种简单的方法可以在不修改列数的情况下执行此操作？

因为它只有5列，所以您可以使用

n-last-child（）为每个元素显式定义它


.grid{
显示：网格；
网格模板列：重复（5,1fr）；
网格间距：5px；
保证金：5px；
}
.grid>span{
填充：10px；
背景：黄色；
}
.grid>span:n最后一个子项（1）{网格列：5；}
.grid>span:n最后一个子项（2）{网格列：4；}
.grid>span:n最后一个子项（3）{网格列：3；}
.grid>span:n最后一个子项（4）{网格列：2；}
/*.grid>span:n最后一个子项（5）{grid column:1；}不需要此子项*/

A.
B
C
D
A.
B
A.
B
C
D
E
我不确定会是5个孩子。目前，我说的是“最多5列”，但孩子的数量会增加vary@Anthony是的，我是说专栏而不是孩子。。如您所见，在示例中，我使用了不同数量的child。在结尾处还添加了另一个示例，因此我尝试在容器上使用
justify content
，但由于容器的宽度是由子容器、间隙和填充的总宽度决定的，因此没有帮助。我是gtg，但我稍后会回来，更深入地看看你的答案。在看到您的方法后，突然想到的一个解决方案是使用您的方法并简单地设置容器的显式宽度，但这可能会导致issues@Anthony检查我添加的第三种方法，如果列数为0，则更适合您的情况known@Anthony从未，在大多数示例中，您都可以在
：root
中看到它，这只是一种习惯（不确定是谁决定的…）。我个人从未（或很少）在
中使用过它：root
它总是一行吗？如果是这样的话，那么flex box看起来是一个更好的选择。@arieljuod ya它总是一排。flex可能是更好的方法，但我在本例中选择grid的原因是，与flex不同，子对象总是假定宽度的1/5，并且可能存在子对象少于5个的情况。