Сетка из двух столбцов с плоским смешанным списком предметов - PullRequest
Новая
       7

Сетка из двух столбцов с плоским смешанным списком предметов

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

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

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

Если я добавлю их все grid-row-start: 1, все они просто рухнут друг над другом наверху.

Я не хочу менять структуру контейнера, так как я хотел бы просто перетасовать классы для перемещения элементов. Теоретически я могу добавить класс, подобный row-1, row-2 и т. Д. В JavaScript, и использовать его, чтобы определить, где должна начинаться ячейка, но мне интересно, есть ли более чистый способ подойти к этому чисто в CSS.

Демо: https://jsfiddle.net/mbynw4cL/1/

enter image description here

1 Ответ

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

Итак, вы хотите использовать свойство grid-auto-flow: 

.grid {
  width: 200px;
  border: 1px solid green;
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-flow: dense;
}

.item {
  width: 30px;
  height: 30px;
  margin: 5px;
}

.item.left {
  grid-column-start: 1;
  justify-self: start;
  background: red;
}

.item.right {
  grid-column-start: 2;
  justify-self: end;
  background: blue;
}
<div class="grid">
  <div class="item left"></div>
  <div class="item left"></div>
  <div class="item right"></div>
  <div class="item right"></div>
  <div class="item left"></div>
</div>

Это «заполнит» пробелы.

См. https://css -tricks.com / snippets / css / complete-guide-grid / # article-header-id-25 для получения дополнительной информации о сетке CSS.

...