grid-row: размещение элемента между строками сетки
Grid-row задаёт начало и конец элемента вдоль строк CSS Grid. Значения относятся к линиям сетки, поэтому номер линии нельзя механически считать номером готовой ячейки.
Назначение
Grid-row задаёт начало и конец элемента вдоль строк CSS Grid. Значения относятся к линиям сетки, поэтому номер линии нельзя механически считать номером готовой ячейки.
Как это работает
Запись 1 / 3 занимает пространство между первой и третьей линиями, то есть две строки. Span описывает количество занимаемых треков. Свойство применяется к элементу сетки, а размеры строк задаются контейнеру.
Пример
<style>.row-demo{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,4rem);gap:.5rem}.row-demo>div{background:#e5f3e9;padding:.5rem}.row-demo .tall{grid-row:1 / 3}</style>
<div class="row-demo"><div class="tall">Две строки</div><div>Верхняя</div><div>Нижняя</div></div>Что должно получиться
Первый блок занимает высоту двух строк вместе с промежутком. Два последующих блока автоматически располагаются в свободной колонке.
Граница применения и частая ошибка
Размещение за пределами явной сетки может создать неявные строки. CSS-перестановка не меняет порядок DOM и клавиатурной навигации. Для связанного текста сначала обеспечьте логичный исходный порядок, затем настраивайте геометрию.
Самостоятельная проверка
Замените конец на span 2 и сравните результат. Включите отображение линий Grid в инспекторе. Добавьте третий трек и объясните, какие линии теперь ограничивают высокий блок.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.