Почему грид элемент перемещается в начало родительского блока?

Question

[Алексей Бугаев]

Начал изучение grid, не могу понять почему любой грид-елемент передвигается в начало блока если задать ему grid-row-start: 1 Ведь заметьте я не задаю grid-column-start: 1 Элементы 2 и 3 и так начинаются с верхнего ряда.

демка на всякий случай:
почему то ссылка на codepen не отображается

код в css

.grid {
	display: grid;
	max-width: 200px;
	min-height: 150px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	background-color: teal;
}
.item {
	border: 1px solid #000;
	font-size: 25px;
}

.item3 {
	grid-row-start: 1;
	border: 3px solid tomato;
}

Answer 1

[Рома Зварич]

На основании этой статьи и этого раздела спецификации

Google-перевод статьи (в принципе, достаточно корректный, чтобы понять суть):
Начиная с: "Let’s describe briefly the main steps of the algorithm..."

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

Вывод: да, Вы явно не указываете номер колонки, но этот элемент первым помещается в сетку и так как номер колонки явно не задан, занимает первую колонку. Остальные элементы добавляются после него, располагаясь друг за другом в строку

Comments

[Алексей Бугаев]

Огромное вам спасибо, за такую подробную информацию!