Заполните контейнер сетки так, чтобы последняя область элемента сетки всегда была заполнена - PullRequest
Новая
       10

Заполните контейнер сетки так, чтобы последняя область элемента сетки всегда была заполнена

2 голосов
/ 12 мая 2019

Прямо сейчас у меня есть сетка с 1 строкой и 5 столбцами , которую я собираюсь использовать для навигационных ссылок, но есть вероятность, что на некоторых страницах сетка Контейнер может не иметь 5 детей.

Проблема в том, что сетки начинают заполняться с первой доступной области.

Есть ли способ заполнить контейнер сетки элементами сетки, чтобы вместо этого всегда заполнялась последняя область?

Например ...

[a][b][c][d][ ] должно быть [ ][a][b][c][d]

[a][b][c][ ][ ] должно быть [ ][ ][a][b][c]

Примечательно, что я не хочу менять направление элементов, но все время держу элементы в одном и том же порядке.

Есть ли простой способ сделать это без изменения количества столбцов?

1 Ответ

3 голосов
/ 12 мая 2019

Поскольку это будет только 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>
...