Теория — Урок 30

Главная идея

Это урок-сборка: мы берём всё из раздела Grid и собираем настоящую страницу — дашборд, галерею или лендинг. Но прежде чем писать CSS, надо ответить на один вопрос: Grid или Flexbox? Правильный выбор делает код короче и понятнее, неправильный — приводит к борьбе с инструментом.

Выбор раскладки — как выбор инструмента в мастерской. Дрель (Grid) нужна, когда сверлишь сетку отверстий по разметке сразу в двух направлениях — по строкам и колонкам. Отвёртка (Flexbox) незаменима, когда надо закрутить ряд шурупов в одну линию. Можно закручивать шуруп дрелью, а сверлить отвёрткой — но это мучение. Бери инструмент под форму задачи: двумерная сетка → дрель/Grid, одномерный ряд → отвёртка/Flex.

Алгоритм выбора: 2D или 1D?

Задай себе один вопрос: «Мне нужно управлять и строками, и колонками одновременно?» Если да — это двумерная задача, берём Grid. Если элементы выстраиваются вдоль одной оси — это Flexbox.

Дерево решения: 2D → Grid, 1D → Flexbox, на реальной странице они дополняют друг друга.

Каркас собираемой страницы (wireframe)

Классический макет «holy grail» — это шапка во всю ширину, под ней три колонки (навигация, контент, боковая панель) и подвал во всю ширину. Именно его удобнее всего описывать через grid-template-areas: раскладка читается прямо в CSS как ASCII-картинка.

5 областей макета. В CSS этот рисунок повторяется строками grid-template-areas.

Как это работает

На контейнере мы объявляем display: grid, рисуем сетку строками grid-template-areas (повторяя имя области, чтобы «растянуть» её на несколько ячеек), задаём ширины колонок через grid-template-columns и расстояние через gap. Дальше каждый элемент получает своё место одной строкой — grid-area: header.

📄 lesson-30/grid.css

.holy-grail {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 14rem minmax(0, 1fr) 16rem;
  gap: 1rem;
}

.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

Почему именно Grid? Здесь шапка и подвал тянутся через все колонки, а средний ряд разбит на три — это управление и строками, и колонками сразу. Flexbox такое тоже умеет, но потребует вложенных контейнеров и расчётов ширины; Grid описывает то же самое наглядно и в одном месте.

Когда применять

Grid — каркас страницы (header/sidebar/main/footer), сетки карточек и галереи, любые таблично-блочные раскладки.
Flexbox — навигация в строку, панель кнопок, выравнивание элементов внутри одной ячейки, чипы/теги.
Вместе — внешний каркас на Grid, а контент внутри ячейки (например, шапка карточки «иконка + заголовок + кнопка») — на Flex.

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

Тянуть один инструмент на всё. Новички либо городят весь сайт на Flexbox с морем вложенных div и ручными ширинами, либо наоборот включают Grid ради ряда из двух кнопок. Спрашивай про каждый блок отдельно: «это 2D-сетка или 1D-ряд?» — и инструмент выберется сам.

Урок 30. Теория: Когда что использовать + мини-проект 4