CSS Grid в практике Полезные размещения без фреймворка

Flexbox или Grid? Используйте оба. Flexbox управляет одной осью — строкой или столбцом. CSS Grid управляет обеими одновременно. Эта разница определяет каждый ваш выбор при размещении.

Свойства, которые действительно важны

Вы можете создавать почти любое размещение, которое вам встретится, с пятью свойствами: grid-template-columns, grid-template-rows, gap, grid-areaи place-items. Вот центрированная карточка в шести строках:

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

place-items: center сокращение означает align-items + justify-items. Одна строка, идеально центрированный контент, без необходимости в вычислениях.

Единица fr: перестаньте думать в процентах

Проценты не учитывают пространство между элементами. fr (дробная единица) распределяет оставшееся пространство после того, как фиксированные значения размещены. Это стандартная сетка из 12 колонок:

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Span 4 of 12 columns */
.col-4 {
  grid-column: span 4;
}

/* Span 8 of 12 columns */
.col-8 {
  grid-column: span 8;
}

Каждая 1fr получает равное количество оставшегося пространства после вычитания зазора. Три колонки по repeat(3, 1fr) никогда не переполнят контейнер — что-то 33.33% может быть неправильно, когда участвует зазор.

Автозаполнение против автозаполнения: адаптивные сетки без запросов на медиа

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

автозаполнение сохраняет пустые колонки. автозаполнение сжимает их, позволяя существующим элементам расширяться и заполнять строку. Для сетки карточек вы почти всегда хотите использовать auto-fill:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

Это полностью адаптивная сетка карточек. Без точек. Каждая карточка имеет ширину не менее 280px, и браузер размещает столько, сколько может в строке. Когда размер окна уменьшается ниже 280px, сетка переходит в одну колонку. Используйте auto-fit если вы хотите, чтобы три карточки на широком экране расширялись и заполняли строку, а не располагались в фиксированных колонках с пустыми зазорами рядом.

Ручное прототипирование такого размещения занимает много времени. Инструмент онлайн-генератор CSS grid позволяет визуально настроить колонки, строки и зазоры до того, как вы начнёте писать код — стоит двух минут, которые экономит при отладке вычислений колонок.

Именованные области: размещение, которое легко читать

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

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 1rem;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }

The grid-template-areas строка — это визуальная карта вашего размещения. Точка (.) отмечает пустую ячейку. Переименуйте секцию, изменяя строку — без необходимости пересчитывать номера строк.

Общие размещения менее чем в 10 строк

Как только вы освоите основы, большинство повторяющихся паттернов сокращаются до нескольких строк.

Боковая панель + основной контент:

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
}

Стекающих секций с постоянной вертикальной ритмикой:

.page-sections {
  display: grid;
  gap: 4rem;
}

Автоматически переносимая сетка иконок:

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 1rem;
}

Инспектор сетки в Chrome DevTools

Откройте DevTools, выберите любой контейнер с сеткой в панели Elements, и найдите сетка метку рядом с элементом. Нажмите на неё, чтобы включить слой сетки — вы получите визуальное представление каждой колонки, строки и зазора, нарисованное прямо на странице.

В панели Размещение (рядом с Computed и Styles) вы можете управлять тем, что показывает слой: номера линий, имена линий, имена областей и расширенные линии, выходящие за пределы границ сетки. Когда размещение нарушается, включение номеров линий при просмотре слоя обычно сразу показывает несоответствующую линию — намного быстрее, чем чтение исходных grid-column значений в панели Styles.

Практическая привычка: сначала создавайте структуру в DevTools, а затем фиксируйте значения в вашем стилевом файле, когда сетка выглядит правильно.

Что осталось у Grid для Flexbox

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

На практике вы будете использовать Grid для внешнего размещения и Flexbox для компонентов внутри него. Они работают совместно; выбирайте тот, который подходит по оси проблемы.

Вам также может понравиться