PassFront
  1. PassFront
  2. База знаний
  3. CSS Grid

Как позиционировать элементы в 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 указывает на последнюю линию, а именованные линии делают раскладку читаемой.

Другие вопросы раздела