CSS Grid: как заставить контейнер занимать весь экран

Быстрый ответ

Чтобы контент отображался на весь экран, примените к стилям CSS Grid-контейнера минимальную высоту min-height: 100vh;, охватывающую всю высоту окна просмотра. Заранее уберите стандартные отступы у тега body, используя margin: 0;, чтобы начать с чистого листа:

body {
  margin: 0;
}

.grid-container {
  display: grid;
  min-height: 100vh;
  /* Настройка сетки на ваше усмотрение (колонки, отступы и пр.) */
}

Подробное руководство

Давайте подробно разберемся, как создать полноэкранный CSS Grid. Обратите внимание на "reddit-style комментарии" в коде ниже — они могут оказаться полезными и, надеемся, внесут нотку юмора.

* { /* Гармония и порядок во вселенной установлены! */
  box-sizing: border-box; /* Чёткость в размерах */
  padding: 0; /* Без лишних нагрузок */
  margin: 0; /* И без ошибок на краях ;) */
}

html, body {
  width: 100%; /* Подгонка ширины */
  height: 100%; /* Подгонка высоты */
  overflow: auto; /* Для обработки непредвиденного контента */
}

.grid-container {
  display: grid; /* Строим сетку */
  position: fixed; /* Оставляем на месте */
  top: 0; /* Верхняя граница */
  left: 0; /* Левая граница */
  right: 0; /* И правая граница */
  bottom: 0; /* И нижняя граница */
  grid-template-columns: repeat(3, 1fr); /* Три колонки одинаковой ширины */
  grid-gap: 10px; /* Отступы между элементами */
}

Продвинутые советы и уловки с работой с сеткой

Адаптивность

Для создания адаптивной структуры используйте единицы fr. При необходимости вносите корректировки через медиа-запросы.

Подробнее об этом расскажет наш спикер на видео

Границы и интервалы

Обведение элементов сетки границами упрощает визуальную проверку, но учтите, что они занимают пространство. При расчёте ширины столбцов и определении интервалов это стоит учитывать.

Позиционирование элементов

Для точного позиционирования используйте position: absolute;, а для главного контейнера предпочтительно использовать position: fixed;.

Совместимость с устаревшими браузерами

Не забывайте о старых версиях браузеров. В качестве альтернативного решения для браузеров, которые не поддерживают Viewport Units или CSS Grid, используйте flexbox или относительные размеры (проценты).

Визуализация

Вот простая диаграмма для наглядности:

CSS Grid-контейнер: [📦]
Полный экран: [🖥️]

Масштабируем сетку до размеров экрана:

CSS Grid-контейнер: [📦 => 🖥️]

Теперь ваш CSS Grid-контейнер будет занимать весь экран.

Завершение

Глобальный сброс

Используйте * selector для глобального сброса стилей, удалив все отсутпы и внутренние поля, и установив box-sizing: border-box;.

Гибкость с min-height

Применяя min-height: 100vh; вместо height: 100vh;, вы обеспечите необходимую гибкость контенту, который может превышать высоту окна просмотра.

Комбинация Viewport Units и CSS Grid

Для полноэкранного, адаптивного дизайна используйте комбинацию единиц vh и grid-template-rows.

Абсолютное заполнение при помощи позиционирования

Примените position: fixed; со значением 0 у каждого из четырёх краёв, чтобы контейнер идеально соответствовал размерам экрана.

Проверка с помощью цветных границ

Цветные границы помогут вам настроить и отлаживать структуру вашей сетки, особенно для обнаружения нежелательных наложений или промежутков.

Полезные материалы

1. Полное руководство по CSS Grid | CSS-Tricks — подробное руководство по CSS Grid.
2. Основные концепции сеточной разметки – CSS: Каскадные таблицы стилей | MDN — обучение основам CSS Grid шаг за шагом.
3. CSS Grid Layout – W3Schools — практический гид по CSS Grid.
4. Stack Overflow: Как сделать div высотой в 100% экрана — обсуждения и решения для внедрения div на весь экран.
5. Создание готовых к продакшену макетов на CSS Grid — Smashing Magazine — практические советы по созданию макетов с использованием CSS Grid.