Примеры — Урок 30

Рабочие примеры

Примеры идут по возрастанию: каркас страницы → адаптивная сетка карточек → Flex внутри ячейки → полная сборка мини-проекта. Сверху — результат, под ним — код.

1. Каркас страницы на Grid (holy grail)

Шапка и подвал тянутся через все колонки, средний ряд разбит на три. Это 2D-задача — берём Grid с именованными областями.

header

nav

main

aside

footer

.page {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 14rem 1fr 16rem;
  gap: 1rem;
}
.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

2. Сетка карточек / галерея (auto-fit + minmax)

Карточки сами переносятся и растягиваются под ширину: одна строка repeat(auto-fit, minmax(...)) заменяет media queries для простой сетки.

Карточка 1

Карточка 2

Карточка 3

Карточка 4

.gallery {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
/* auto-fit сам решает, сколько колонок влезет;
   minmax не даёт карточке стать уже 180px */

3. Flexbox внутри ячейки — шапка карточки

Сетку карточек строит Grid, но внутри карточки иконка, заголовок и кнопка — это ряд в одну линию. Здесь правит Flexbox.

Заголовок

.card-head {
  display: flex;
  align-items: center;
  gap: .625rem;
}
.card-head .title { flex: 1; } /* заголовок забирает
                                  свободное место,
                                  кнопка прижата вправо */

4. Один ряд: Grid это перебор, выбираем Flex

Панель кнопок — одномерная задача. Flexbox справляется одной строкой justify-content, городить Grid не нужно.

Панель

.toolbar {
  display: flex;            /* 1D-ряд → Flexbox */
  justify-content: space-between;
  align-items: center;
}
.toolbar .actions { display: flex; gap: .5rem; }

5. Мини-проект: дашборд (Grid-каркас + Flex/Grid внутри)

Сборка всего вместе: внешний каркас на Grid, шапка — Flex-ряд, тело main — вложенная сетка карточек.

Дашбордменю

nav

блок

/* внешний каркас — 2D → Grid */
.dashboard {
  display: grid;
  grid-template-areas: "header header" "nav main";
  grid-template-columns: 14rem 1fr;
  gap: 1rem;
}
/* шапка — 1D ряд → Flex */
.dashboard__header { display: flex; justify-content: space-between; align-items: center; }
/* тело — сетка виджетов → Grid */
.dashboard__main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

Проверь в DevTools: открой Grid overlay (значок grid рядом с элементом в инспекторе) — браузер подсветит линии, треки, gap и имена областей прямо на странице.

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