Линии и области сетки

По умолчанию элементы сетки занимают ячейки по очереди. Но элемент можно поставить в конкретное место и растянуть на несколько колонок или строк. Для этого есть два способа: по номерам линий и по именованным областям.

Линии сетки

Колонки и строки разделены линиями. Их нумеруют с единицы: у сетки из трёх колонок четыре вертикальные линии — от 1 у левого края до 4 у правого. Отрицательные номера считают с конца: -1 — последняя линия.

 1        2        3        4
 |  кол.1 |  кол.2 |  кол.3 |

Размещение по линиям

grid-column: 1 / 3 означает «от линии 1 до линии 3» — элемент занимает две колонки. Запись 1 / -1 растягивает элемент на всю ширину, сколько бы колонок ни было:

<style>
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .grid div { padding: 12px; background: lightyellow; }
  .two { grid-column: 1 / 3; }
  .full { grid-column: 1 / -1; background: gold; }
</style>
 
<div class="grid">
  <div class="full">На всю ширину</div>
  <div class="two">Линии 1–3</div>
  <div>Одна</div>
</div>

span — сколько ячеек занять

Часто удобнее сказать не «до какой линии», а «сколько колонок». Это делает слово span. Для строк есть такое же свойство grid-row:

<style>
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 50px; gap: 8px; }
  .grid div { padding: 8px; background: honeydew; }
  .big { grid-column: span 2; grid-row: span 2; background: lightgreen; }
</style>
 
<div class="grid">
  <div class="big">2 × 2</div>
  <div>2</div><div>3</div><div>4</div><div>5</div>
</div>

Большой элемент занял четыре ячейки, остальные обтекли его.

Именованные области

Номера линий трудно читать. Свойство grid-template-areas рисует сетку словами: каждая строка в кавычках — ряд сетки, каждое слово — ячейка. Элементу область назначают через grid-area:

<style>
  .page {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-areas:
      "header header"
      "menu   main"
      "footer footer";
    gap: 8px;
  }
  .page > * { padding: 8px; background: lavender; }
  header { grid-area: header; }
  nav { grid-area: menu; }
  main { grid-area: main; }
  footer { grid-area: footer; }
</style>
 
<div class="page">
  <header>Шапка</header>
  <nav>Меню</nav>
  <main>Содержимое страницы</main>
  <footer>Подвал</footer>
</div>

Одинаковые слова рядом сливаются в одну область. Точка . вместо слова оставляет ячейку пустой.

Переставить области

Порядок областей задаётся в CSS, а не в HTML. Достаточно переписать grid-template-areas, и каркас поменяется — например, меню уйдёт направо:

<style>
  .page {
    display: grid;
    grid-template-columns: 1fr 100px;
    grid-template-areas: "main menu";
    gap: 8px;
  }
  .page > * { padding: 8px; background: mistyrose; }
  nav { grid-area: menu; }
  main { grid-area: main; }
</style>
 
<div class="page">
  <nav>Меню</nav>
  <main>Содержимое</main>
</div>

В уроке про медиазапросы так же меняют каркас для телефона.

Частая ошибка

Область должна быть прямоугольником, а все строки шаблона — одинаковой длины. Если область получилась буквой «Г», браузер отбрасывает всё свойство grid-template-areas, и элементы оказываются совсем не там, где задумано:

<style>
  .page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "main side"
      "main main";
    gap: 8px;
  }
  .page > * { padding: 8px; background: lightyellow; }
  .a { grid-area: main; }
  .b { grid-area: side; }
</style>
 
<div class="page">
  <div class="a">main</div>
  <div class="b">side</div>
</div>

Здесь main занимает три ячейки буквой «Г» — шаблон не сработал.

Спасибо, что читаете!