Урок 9. CSS Grid — сетка страницы

Flexbox раскладывает элементы в одну линию — строку или колонку. Grid (сетка) работает сразу в двух направлениях: вы задаёте столбцы и строки, а элементы занимают ячейки. Это удобно для раскладки страницы целиком (шапка, боковая колонка, текст, подвал) и для ровных рядов карточек.

Первая сетка

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 16px;
}

grid-template-columns перечисляет ширины столбцов: здесь три столбца по 200 пикселей. Элементы сами заполняют ячейки слева направо и сверху вниз: 1, 2, 3 в первой строке, 4, 5, 6 — во второй. Строки создаются автоматически, сколько нужно, а их высота подстраивается под содержимое. gap — промежуток между ячейками, как во Flexbox.

Как и Flexbox, Grid задаётся родителю и действует на его прямых детей.

Единица fr

Пиксели делают сетку жёсткой. Единица fr (fraction — доля) делит свободное место:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

Три равных столбца на всю ширину контейнера. 1fr 2fr — второй столбец вдвое шире первого. 250px 1fr — боковая колонка 250 пикселей, а всё остальное отдано второй колонке. gap вычитается заранее, поэтому ничего не вылезает за край.

Чтобы не писать одно и то же, есть repeat(): repeat(3, 1fr) — то же, что 1fr 1fr 1fr; repeat(4, 100px) — четыре столбца по 100 пикселей.

Элемент на несколько ячеек

Линии сетки пронумерованы с 1: у трёх столбцов четыре вертикальные линии. Элементу можно сказать, от какой линии до какой он тянется:

.wide {
  grid-column: 1 / 3;
}
.tall {
  grid-row: span 2;
}
.full {
  grid-column: 1 / -1;
}

• grid-column: 1 / 3 — от первой линии до третьей, то есть два столбца;
• span 2 — растянуться на две ячейки от того места, где элемент оказался;
• -1 — последняя линия: 1 / -1 — на всю ширину сетки, сколько бы столбцов ни было.

Раскладка страницы областями

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

<body class="layout">
  <header class="head">Шапка</header>
  <nav class="side">Меню</nav>
  <main class="main">Основной текст</main>
  <footer class="foot">Подвал</footer>
</body>

.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  gap: 20px;
  min-height: 100vh;
  margin: 0;
}
.head { grid-area: head; }
.side { grid-area: side; }
.main { grid-area: main; }
.foot { grid-area: foot; }

• Шапка и подвал занимают оба столбца (имя повторено дважды), меню и основной текст — по одному.
• grid-area у элемента связывает его с областью.
• grid-template-rows: auto 1fr auto вместе с min-height: 100vh: шапка и подвал — по содержимому, а средняя строка забирает всю остальную высоту. Подвал прижат к низу окна, даже если текста мало.

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

Карточки без медиазапросов

Сетка может сама решать, сколько столбцов помещается, — без медиазапросов (отдельных правил для узких экранов, о них — в уроке Адаптивная вёрстка):

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

• minmax(220px, 1fr) — столбец не уже 220 пикселей, а дальше делит место поровну;
• auto-fill — столбцов столько, сколько поместится.

На широком экране в ряд встанет несколько карточек, на телефоне — одна, и все они одной ширины, в том числе в последнем ряду. Вариант auto-fit отличается, когда карточек мало: auto-fill оставит пустые столбцы справа, а auto-fit растянет имеющиеся карточки на всю ширину.

Выравнивание в ячейках

• justify-items — по горизонтали внутри ячейки, align-items — по вертикали. По умолчанию блок растягивается на всю ячейку.
• place-items: center — оба сразу, элементы встают в центр своих ячеек.

Так центрируют и одиночный блок: у родителя display: grid; place-items: center; и высота.

Flexbox или Grid

• Flexbox — когда элементы идут в одну линию и их размер зависит от содержимого: меню, кнопки в ряд, шапка с логотипом.
• Grid — когда нужна сетка в двух направлениях или ровные столбцы: раскладка страницы, галерея, карточки.

Они отлично сочетаются: страница разложена Grid, а внутри шапки — Flexbox.

Частые ошибки

• Элементы всё равно в столбик — не указаны столбцы: без grid-template-columns сетка из одного столбца.
• Сетка вылезает за экран на телефоне — столбцы заданы в пикселях. Используйте fr или minmax(…, 1fr).
• Область не встала на место — опечатка в имени в grid-area или в grid-template-areas, у каждой строки в кавычках должно быть одинаковое число слов.

Коротко

• display: grid у родителя, столбцы — grid-template-columns, промежутки — gap.
• fr — доля свободного места, repeat(3, 1fr) — три равных столбца.
• Растянуть элемент: grid-column: 1 / 3, span 2, на всю ширину — 1 / -1.
• Раскладка страницы словами — grid-template-areas и grid-area.
• Карточки сами по ширине экрана — repeat(auto-fill, minmax(220px, 1fr)).

Проверьте себя