Как работает CSS grid-autoflow?

Question

Я столкнулся с проблемой, что я не понимаю, как работают неявные сетки.Я читаю документацию, MDN и еще пару ресурсов.Но есть открытый вопрос.

.grid {
  display: grid;
  grid-template: repeat(2, 100px) / repeat(6, 1fr);
  grid-gap: 1rem;
  font-size: 2rem;
}

.grid__item {
  background-color: #BDBDBD;
}

.grid__item--1 {
  grid-row: 1 / -1;
}

.grid__item--5 {
  grid-row: 1 / -1;
}

<div class="grid">
  <div class="grid__item grid__item--1">1</div>
  <div class="grid__item grid__item--2">2</div>
  <div class="grid__item grid__item--3">3</div>
  <div class="grid__item grid__item--4">4</div>
  <div class="grid__item grid__item--5">5</div>
  <div class="grid__item grid__item--6">6</div>
</div>

И вот результат:

Почему пятый блок идет довторой?

код : https://jsfiddle.net/serhioses/51do02xa/

Answer 1

То, что вы хотите, определяется в этой части спецификации , где мы впервые имеем:

Обработка элементов, привязанных к данной строке.

Для каждого элемента сетки с определенной позицией строки (то есть свойства grid-row-start и grid-row-end определяютопределенная позиция сетки), в порядке изменения порядка документов:

затем

Позиционирование оставшихся элементов сетки.

Таким образом, в основном мы позиционируем элементы, которые имеют эксплицитное размещение внутри строк (оба grid-row-start И grid-row-end должны отличаться от auto) затем мы помещаем другое с учетом алгоритма, описанного в приведенной выше спецификации.

Даже если вы измените порядок, вы получите тот же результат:

.grid {
  display: grid;
  grid-template: repeat(2, 100px) / repeat(6, 1fr);
  grid-gap: 1rem;
  font-size: 2rem;
}

.grid__item {
  background-color: #BDBDBD;
}

.grid__item--1 {
  grid-row: 1 / -1;
}

.grid__item--5 {
  grid-row: 1 / -1;
  order:100;
}

<div class="grid">
  <div class="grid__item grid__item--1">1</div>
  <div class="grid__item grid__item--2">2</div>
  <div class="grid__item grid__item--3">3</div>
  <div class="grid__item grid__item--4">4</div>
  <div class="grid__item grid__item--5">5</div>
  <div class="grid__item grid__item--6">6</div>
</div>