Заполнение ячеек, начиная снизу в CSS Сетка - PullRequest
Новая
       7

Заполнение ячеек, начиная снизу в CSS Сетка

2 голосов
/ 03 апреля 2020

У меня есть CSS-сетка с 3 строками. Для заполнения может быть менее 3 элементов, и я хочу начать заполнять его снизу.

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

html, body, div {
  height: 100%;
}

div {
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: repeat(3, 1fr);
  /* MISSING RULE */
}
<div>
  <p>Last item</p>
  <p>Second last item</p>
  <p>Top item</p>
</div>

Фактический вывод: 

Last item
Second last item
Top item

Желаемый вывод: 

Top item
Second last item
Last item

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

Ответы [ 2 ]

0 голосов
/ 03 апреля 2020

В CSS нет функции column-reverse, как в flexbox.

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

Вот как это будет работать во flexbox: 

div {
  display: flex;
  flex-direction: column-reverse;
  height: 100vh;
}

p {
  flex: 1;
}


/* demo styles */
p {
  margin: 0;
  background-color: lightgreen;
}
p + p {
  margin-bottom: 10px;
}
body {
  margin: 0;
}
<div>
  <p>Last item</p>
  <p>Second last item</p>
  <p>Top item</p>
</div>
0 голосов
/ 03 апреля 2020

Если вы хотите использовать CSS Макет сетки, это будет так. Я изменяю ваш HTML. Вы должны написать свойство CSS для дочернего элемента сетки, где начинать и где заканчивать. grid-row-start: и grid-row-end:. Вот кодовая ручка . 

  .grid-item{
      border: 2px solid red;
      border-radius: 5px;
      height: 200px;
      padding: 10px;
      width: 300px;
      margin-left: auto;
      margin-right: auto;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, 1fr);
    }
    .grid-item p{
      margin: 0;
    }
    .grid-item .first-item{
      grid-row-start: 1;
    }
    .grid-item .last-item{
      grid-row-start: 3;
    }
<div class="grid-item">
        <p class="last-item">Last item</p>
        <p class="second-item">Second last item</p>
        <p class="first-item">Top item</p>
    </div>

Если вы хотите использовать flexbox, он будет использовать двух строчный код. 

<div>
    <p>Last item</p>
    <p>Second last item</p>
    <p>Top item</p>
</div>

CSS для этого 

div{
    display: flex;
    flex-direction: column-reverse;
}

Свойство flex-direction CSS определяет способ размещения элементов flex в контейнере flex, определяя основную ось и направление (нормальное или обратное).

...