Возможна ли перенос в группу повторяющихся списков из 2 столбцов в другой столбец контейнера в CSS Сетка? - PullRequest
Новая
       10

Возможна ли перенос в группу повторяющихся списков из 2 столбцов в другой столбец контейнера в CSS Сетка?

0 голосов
/ 30 марта 2020

У меня есть фиксированная высота моего контейнера с группой списков в 2 столбцах - sortable1 и sortable2 с grid-auto-rows: 1fr. Элементы списка в группе из 2 столбцов всегда одинаковы.
Возможны ли элементы списка, при которых высота контейнера переполнения переносится в следующий столбец? Что у меня есть Что мне нужно (хочу) Список может быть другим. Структура документа 

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 400px;
  background: red;
}
.columnlist {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-template-areas: "sortable1 sortable2";
  padding: 20px;
}
#sortable1 {
  grid-area: sortable1;
  display: grid;
}

#sortable1 li {
  padding: 10px;
  margin: 5px 0;
  border: solid 1px black;
}

#sortable2 {
  grid-area: sortable2;
  display: grid;
  grid-auto-rows: 1fr;
}

#sortable2 li {
  background: rgb(255, 250, 205);
  padding: 10px;
  margin: 5px 0;
  border: solid 1px black;
}

ul {
  list-style: none;
}

ol,
ul {
  margin: 0;
}
<div class="container">
  <div class="columnlist">
    <ul id="sortable1">
      <li>title 1</li>
      <li>title 2</li>
      <li>title 3</li>
      <li>title 4</li>
    </ul>
    <ul id="sortable2">
      <li>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </li>
      <li>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. </li>
      <li>3 Lorem ipsum dolor sit amet. </li>
      <li>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus. </li>
    </ul>
  </div>
</div>
[1]: https://i.stack.imgur.com/OTEBL.png
[2]: https://i.stack.imgur.com/g35e4.jpg
...