Почему из за `grid-row: 1 / -1` грид элементы размещаются начиная с первой колонки?

#css #css3 #css_grid

Почему второй и третий элеметы со свойством grid-row: 1 / -1 размещаются начиная
с первой колонки? Но, если задать сколько полос должен занимать элемент grid-row: span
2 (пятый блок), то он остается на своем месте.



.grid {
  display: grid;
  padding: 5rem;
  grid-template-rows: [start1] 100px [end1 start2] 100px  [end2] 50px;
  grid-template-columns: repeat(5, 1fr);
  //grid-auto-flow: row;
  grid-gap: 1rem;
}
.grid__item {
  width: 100%;
  height: 100%;
  background-color: #eaeaea;
  font-size: 24px;
  font-weight: bold;
}

.grid__item-2 {
  grid-row: 1 / -1;
}
.grid__item-3 {
  grid-row-start: start1;
  grid-row-end: end2;
}
.grid__item-5 {
  grid-row: span 2;
}

  
1
  
2
  
3
  
4
  
5




    

Ответы

Ответ 1

Исходя из спецификации, это дефолтное поведение. Алгоритм авто размещения grid-элементов
у которых определенно свойство grid-row-start/end задает стартовую линию колонки с
наименьшим положительным индексом. Что бы избежать перекрытие данной области grid-area
и занятием другой grid-cell.


  Process the items locked to a given row.
  
  For each grid item with a definite row position (that is, the grid-row-start and
grid-row-end properties define a definite grid position), in order-modified document order:
  
  “sparse” packing (default behavior)
  
  Set the column-start line of its placement to the earliest (smallest positive index)
line index that ensures this item’s grid area will not overlap any occupied grid cells
and that is past any grid items previously placed in this row by this step.


Насколько я понял, пятый блок размещается на своем месте из за того, что мы не указываем
grid-линии к которым он должен быть привязан, а просто задаем ему размер в 2 grid-полосы.