填充网格容器，以便始终填充最后一个网格项目区域 [英] Fill grid container so that last grid item area is always filled

问题描述

现在我有一个网格，该网格具有 1行和 5列，我将用于导航链接，但是在某些页面上还是有可能网格容器可能没有5个孩子。

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

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

例如...

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

[a] [b] [c] [] [] 应为 [] [] [a] [ b] [c]

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

是否有简单的方式来实现无需修改列数？

解决方案

由于只有5列，因此您可以使用 nth-last-child（）

  .grid {display：grid; grid-template-columns：repeat（5,1fr）; grid-gap：5px; margin：5px;}。grid>跨度{padding：10px;背景：黄色； } .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; }不需要这个* /  

 < div类= 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> / span> c&s; / span< span> d< / span< span" e< / span> / div / div  

或考虑使用flexbox会更容易：

  .grid {display：flex;边距：5px; justify-content：flex-end;}。grid>跨度{padding：10px;背景：黄色；宽度：calc（20％-10px）;边距：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> c< / span< span> d< / span< span> e< / span> // div> code> pre> 

---

关于CSS网格的另一个想法是语法可以更多直观且易于扩展的任意数量的列：

  .grid {display：grid; grid-template-columns：repeat（var（-n，5），1fr）; grid-gap：5px; margin：5px;}。grid>跨度{padding：10px;背景：黄色； } .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; }等... * /  

 < 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> / span> b< / span> s< c< / span< span> d< / span< span> e&s / span> / div ;  

Right now I have a grid with 1 row and 5 columns, which I'm going to be using for navigational links, but there's a chance that on some pages the grid container might not have 5 children.

The issue is that grids begin filling from the first available area.

Is there any way to fill the grid container with grid items so that instead the last area is always filled?

For example...

[a][b][c][d][ ] should be [ ][a][b][c][d]

[a][b][c][ ][ ] should be [ ][ ][a][b][c]

Notably, I do not want to reverse the direction of the elements, but rather keep the elements in the same order all the time.

Is there a simple way to do this without modifying the number of columns?

解决方案

Since it's will only be 5 columns you can explicitly define this for each element using 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>

Or consider flexbox where it will be easier:

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

---

Another idea with CSS grid where the syntax can be more intuitive and easily scalable for any number of columns:

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

这篇关于填充网格容器，以便始终填充最后一个网格项目区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！