Как позиционировать элементы в Grid по линиям и использовать именованные линии?
CSS Grid
Grid-линии — границы между треками, нумеруются с 1, а элемент можно поставить между любыми из них.
Позиционирование
.item {
grid-column: 2 / 4; /* от линии 2 до линии 4 */
grid-row: 1 / span 2; /* начиная с линии 1, занять две строки */
}
.full {
grid-column: 1 / -1; /* до последней линии */
}Отрицательные номера считаются с конца.
Именованные линии
.layout {
display: grid;
grid-template-columns:
[full-start] 1fr
[content-start] minmax(0, 960px)
[content-end] 1fr
[full-end];
}
.text { grid-column: content; } /* внутри контентной области */
.banner { grid-column: full; } /* на всю ширину */Так делают страницы, где текст стоит в центральной колонке, а отдельные блоки выходят за её пределы.
Коротко для собеседования
Элементы привязывают к линиям через grid-column и grid-row, -1 указывает на последнюю линию, а именованные линии делают раскладку читаемой.