Введение в макет CSS Grid. Терминология Grid System

Я думаю, что вы уже в курсе, что Grid превосходит Flexbox для создание макетов. Но как насчет адаптивных макетов? Что лучше использовать Flexbox или Grid? Оба умеют работать с адаптивными макетами. Вы можете подумать, что Flexbox лучше подходит, в конце концов - элементы Flex могут растягиваться, сжиматься, изменять направление и т.д. Но в Grid на самом деле есть несколько новых трюков, которые сэкономит вам много времени и проблем для адаптивных макетов.

Функция Minmax

Первый блестящий новый инструмент Grid, функция minmax, который позволяет нам определять диапазоны для столбцов и строк в нашем макете. В этом примере у нас есть оранжевая боковая панель, и мы хотим чтобы ширина была не меньше 100 пикселей, но не более 30% от ширины контейнера. Ширина контейнер 500 пикселей, поэтому наша боковая панель с удовольствием занимает 30% (150 пикселей).

Вот такой же точно код, но ширина контейнера меньше 150px. Теперь наше минимальное значение срабатывает и гарантирует, что оранжевая боковая панель не будет меньше 100 пикселей.

Работа функции minmax просто удивляет, в большинстве случаев вам даже не нужно будет использовать медиа-запросы.

Мы можем добиться аналогичного эффекта с помощью Flexbox, но для этого требуется немного больше работы и кода. Мы должны использовать комбинацию flex-grow, min-width, max-width:

Метод с Grid более гибкий и проще адаптируется. Кода меньше почти в два раза.

Одно правило для всех элементов

Если вам все-таки нужны медиа-запросы, с макетом Grid, это легко сделать. Предположим, мы хотим изменить этот макет на мобильном устройстве в один столбец. С помощью Flexbox нам нужно будет изменить каждый элемент в макете, чтобы переопределить минимальную ширину. Максимальную ширину отменять не нужно, так как минимальная ширина имеет приоритет.

Если у вас простой макет этот подход вполне себе рабочий. Но чем сложнее будет ваш макет, тем больше элементов нужно будет переопределять через медио-запросы. С помощью Grid, эту задачу решить намного проще.

От автора: статья из серии понятие макета CSS Grid. В прошлых уроках мы изучили синтаксис сеток, изучили несколько способов расположения элементов на странице и попрощались с некоторыми старыми привычками. В этом уроке мы применим все наши знания для создания адаптивного макета на практике.

Медиа запросы

Возьмем демо из предыдущего урока.

Страница состоит из двух сеток: главная сетка и вложенная внутрь одного из элементов. Мы можем контролировать наши сетки с помощью медиа запросов. Это значит, что мы можем полностью перестраивать макет под другую ширину экрана.

Начнем мы с копирования объявления первой сетки. Обернем дубликат в медиа запрос по технике mobile-first. В качестве точки перехода я взял произвольно 500px.

Grid-1 { /* стили для сетки */ } @media only screen and (min-width: 500px) { .grid-1 { /* стили для сетки */ } }

Теперь мы поменяем нашу сетку в первом объявлении, поместив все в один столбец. Задаем один столбец мы с помощью свойства grid-template-columns. Проверьте, чтобы наши четыре строки были заданы через свойство grid-template-rows и соответствовали макету при помощи свойства grid-template-areas:

Grid-1 { display: grid; width: 100%; margin: 0 auto; grid-template-columns: 1fr; grid-template-rows: 80px auto auto 80px; grid-gap: 10px; grid-template-areas: "header" "main" "sidebar" "footer"; }

Чтобы уместиться в маленькие экраны, мы сделали grid-gap равным 10px по умолчанию. Вот что у нас получилось . Вы также должны заметить, что мы меняем свойства padding и font-size в элементах.grid-1 div с помощью медиа запросов.

Наша вложенная сетка

Код выше изменяет наш главный макет. Однако у нас еще есть вложенная сетка, которая упрямо не хочет избавляться от своих двух колонок на любых экранах. Чтобы исправить это, мы сделаем ровно то же самое, но возьмем другую точку перехода по методу content-first:

Item-2 { /* стили сетка */ } @media only screen and (min-width: 600px) { .item-2 { /* стили сетки */ } }

Если переделать демо с автозаполнением и изменить ширину колонок на minmax(9em, 1fr), сетка бы пыталась вместить максимально возможное количество треков шириной 9em, а затем расширила бы их до 1fr, пока не заполнится весь контейнер:

Недостаток: сетка будет пересчитывать треки только после перезагрузки, а не при изменении ширины окна. Попробуйте сузить окно браузера и обновить страницу. Для изменения значений можно подключить медиа запросы, но они плохо дружат с изменением ширины окна браузера.

Заключение

Обобщим все вышесказанное в списке:

Медиа запросы позволяют нам полностью перестроить сетку при помощи изменения свойства grid-template-areas (и других) для различных сценариев.

Свойство transition никак не влияет на макет сетки.

Для заполнения контейнера сетки хорошо подходит ключевое слово auto-fill.

Функция minmax() отлично дополняет автозаполнение, но не дает нам настоящей адаптивности.

Теперь вы готовы работать с сетками! Следите за новыми статьями по CSS Grid, практическими упражнениями, решениями распространенных проблем с сетками.

Дэнни Марков

Дизайн довольно простой - он состоит из выровненного по центру контейнера, внутри которого у нас есть шапка, основной раздел, боковая панель и подвал. Вот главные «испытания», которые мы должны провести, сохраняя CSS и HTML по возможности чистыми:

1. Разместить четыре основных раздела макета.
2. Сделать страницу адаптивной (боковая панель опускается ниже основного содержимого на маленьких экранах).
3. Выровнять содержимое шапки - навигация слева, кнопка справа.

Как вы можете видеть, ради сравнения мы оставили всё максимально простым. Начнём с первого испытания.

Испытание 1. Размещение разделов страницы

Решение на Flexbox

Добавляем display: flex к контейнеру и задаём направление дочерних элементов по вертикали. Это позиционирует все разделы друг под другом.

Container { display: flex; flex-direction: column; }

Теперь нам нужно сделать так, чтобы основной раздел и боковая панель располагались рядом. Поскольку flex-контейнеры обычно однонаправлены, нам нужно добавить дополнительный элемент.

Затем мы устанавливаем этому элементу display: flex и flex-direction с противоположным направлением.

Main-and-sidebar-wrapper { display: flex; flex-direction: row; }

Последний шаг - задать размеры основного раздела и боковой панели. Мы хотим, чтобы основное содержимое было в три раза шире боковой панели, что несложно сделать с помощью flex или процентов.

Как вы можете видеть, Flexbox сделал всё хорошо, но нам кроме этого понадобилось довольно много свойств CSS плюс дополнительный элемент HTML. Давайте посмотрим, как будет работать CSS Grid.

Решение на CSS Grid

Существует несколько вариантов использования CSS Grid, но мы воспользуемся синтаксисом grid-template-areas , как наиболее подходящего для наших целей.

Сперва мы определим четыре grid-area , по одному на каждый раздел страницы:

Теперь мы можем настроить нашу сетку и определить расположение каждой области. Вначале код может показаться довольно сложным, но как только вы познакомитесь с системой сетки, он становится проще для понимания.

Container { display: grid; /* Определяем размер и число колонок нашей сетки. Единица fr работает подобно Flexbox: колонки делят свободное пространство в строке согласно их значениям. У нас будет две колонки - первая в три раза больше второй. */ grid-template-columns: 3fr 1fr; /* Связываем сделанные ранее области с местами в сетке. Первая строка - шапка. Вторая строка делится между основным разделом и боковой панелью. Последняя строка - подвал. */ grid-template-areas: "header header" "main sidebar" "footer footer"; /* Интервал между ячейками сетки будет 60 пикселей */ grid-gap: 60px; }

Вот и всё! Наш макет теперь будет соответствовать указанной выше структуре и мы его настроили так, что нам не придётся иметь дело с margin или padding .

Испытание 2. Делаем страницу адаптивной

Решение на Flexbox

Выполнение этого шага строго связано с предыдущим. Для решения на Flexbox нам придётся изменить flex-direction и отрегулировать margin .

@media (max-width: 600px) { .main-and-sidebar-wrapper { flex-direction: column; } .main { margin-right: 0; margin-bottom: 60px; } }

Наша страница довольно простая, поэтому в медиа-запросе мало работы, но в более сложном макете придётся много чего переделывать.

Решение на CSS Grid

Поскольку мы уже определили grid-areas , нам просто нужно переопределить их порядок в медиа-запросе. Мы можем использовать ту же настройку колонок.

@media (max-width: 600px) { .container { /* Выравнивание областей сетки для мобильного макета */ grid-template-areas: "header header" "main main" "sidebar sidebar" "footer footer"; } }

Или можем переопределить весь макет с нуля, если считаем, что это решение чище.

@media (max-width: 600px) { .container { /* Переделываем сетку в одноколоночный макет */ grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" "footer"; } }

Испытание 3. Выравнивание компонентов шапки

Решение на Flexbox

Мы уже делали похожий макет на Flexbox в одной из наших старых статей - . Техника довольно простая:

Header { display: flex; justify-content: space-between; }

Теперь список навигации и кнопка выровнены правильно. Осталось только разместить пункты внутри