Блог

Главная - Вопросы по программированию - Как я могу вставить новые элементы в сетку в верхнем ряду?

Как я могу вставить новые элементы в сетку в верхнем ряду?

html #css #css-grid

#HTML #css #css-сетка

Вопрос:

Я вставляю элементы из списка в сетку.

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

 .container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(7, 1fr);
}

.item1 {
  grid-column: 3 / 4;
  background-color: coral;
}

.item2 {
  grid-column: 5 / 5;
  background-color: red;
} 
 <div class="container">
  <div class='item1'>1</div>
  <div class='item1'>2</div>
  <div class='item2'>3</div>
</div>

https://jsfiddle.net/epr5atvw/

Как я могу переместить элемент 3, чтобы он был рядом с элементом 1? Мой список отсортирован, и я не могу его изменить.

Комментарии:

1. или использовать grid-auto-flow: dense;

Ответ №1:

Использовать grid-auto-flow:column; 

 .container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-flow: column;
}

.item1 {
  grid-column: 3 / 4;
  background-color: coral;
}

.item2 {
  grid-column: 5 / 5;
  background-color: red;
} 
 <div class="container">
  <div class='item1'>1</div>
  <div class='item1'>2</div>
  <div class='item2'>3</div>
</div>

Метки: