Можно ли принудительно перенести элемент в последний ряд неявной сетки? - PullRequest
Новая
       7

Можно ли принудительно перенести элемент в последний ряд неявной сетки?

0 голосов
/ 18 октября 2018

У меня есть динамически сгенерированная сетка, которая по причинам не имеет элементов в неизвестном количестве начальных строк.Все дочерние элементы контейнера сетки, кроме последнего, получают, к какой строке они принадлежат.Есть ли способ убедиться, что последний элемент находится в последнем ряду?Есть ли grid-row-start эквивалент grid-column-start: -1?

Для расширения вопроса по умолчанию последний элемент, вероятно, будет один в начале: 

.container {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 60px;
}
 
.normal-child {
    background-color: blue;
}
 
.normal-child:nth-child(2n) {
    background-color: red;
}
 
.normal-child--3 {
    grid-row: 3 / span 1;
}
  
.normal-child--4 {
    grid-row: 4 / span 1;
}
  
.normal-child--5 {
    grid-row: 5 / span 1;
}
  
.last-child {
    background-color: green;
} 
<div class="container">
    <div class="normal-child normal-child--3"></div>
    <div class="normal-child normal-child--3"></div>
    <div class="normal-child normal-child--3"></div>
    <div class="normal-child normal-child--4"></div>
    <div class="normal-child normal-child--4"></div>
    <div class="normal-child normal-child--4"></div>
    <div class="normal-child normal-child--5"></div>
    <div class="normal-child normal-child--5"></div>
    <div class="normal-child normal-child--5"></div>
    <div class="last-child"></div>
 </div>

Я могу назначить произвольно большое число для начала строки элемента, но это кажется не элегантным, и есть шанс, хотя и небольшой, что крайний случай, когдабудут встречаться разрывы.

Я также пытался выяснить, как назвать последнюю строку, но я не смог найти способ назвать строки в неявной сетке.

1 Ответ

0 голосов
/ 29 ноября 2018

На самом деле есть строка сетки: -1 или начало строки сетки: -1, точно так же, как столбец сетки: -1

Это работает довольно хорошо, пока вы находитесь в пределах диапазонаваша явная сетка, но перестает работать, как только вы попадаете в неявную сетку.Причина в том, что отрицательные числовые индексы в свойствах размещения сетки отсчитываются от краев явной сетки. См. Также здесь https://css -tricks.com / дифференцировать-явные-неявные-сетки /

Потенциально это план, по крайней мере, позволить элементам охватить последнюю строку / столбец, который был помечен для обсуждения на уровне 3, но это также не затрагивает ваш случай.Но сейчас нет способа достичь того, что вы просите, с помощью неявной сетки.

Могут быть некоторые (некрасивые) решения, но для этого потребуется по крайней мере известное количество пустых начальных строк

...