grid-column: положение по линиям колонок
grid-column задаёт начальную и конечную линии размещения grid-элемента по колонкам.
Назначение
grid-column задаёт начальную и конечную линии размещения grid-элемента по колонкам.
Как это работает
Запись 1 / -1 растягивает элемент от первой до последней линии явной сетки. span 2 означает охват двух треков относительно другой границы. Номера относятся к линиям, а не к самим колонкам.
Пример
<style>
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.grid>div{padding:12px;background:#eaf4ee}.wide{grid-column:1 / -1}
</style>
<div class="grid"><div class="wide">Общий заголовок</div><div>HTML</div><div>CSS</div><div>JS</div></div>Что должно получиться
Заголовок занимает все явные колонки, а остальные блоки распределяются по одной колонке. Изменение числа треков не требует менять правило полной ширины.
Граница применения и частая ошибка
При указании несуществующей линии может возникнуть неявная сетка. Не считайте, что произвольное большое число автоматически означает «до конца текущей строки».
Самостоятельная проверка
Измените число колонок с трёх на две. Проверьте, что элемент с 1 / -1 по-прежнему занимает полную ширину явной сетки без ручной смены конечного номера.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.