Как создать адаптивный макет CSS Grid

Как создать адаптивный макет CSS 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 {
        /* стили сетки */
    }
 
}

На CodePen можно посмотреть конечный результат. Стоит обратить внимание на:

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

Свойство transition никак не взаимодействует с макетом CSS Grid. Вы не сможете сделать перестроение от одного макета к другому плавным, когда работают медиа запросы.

Автозаполнение и функция minmax()

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

Автозаполнение

До сих пор наш подход заключался в том, что мы задавали количество дорожек и смотрели, чтобы элементы правильно заполняли их. Именно это можно наблюдать в демо ниже. Мы задали свойство grid-template-columns: repeat(4, 1fr);, которое говорит браузеру: «создай четыре колонки и сделай их одинаковой ширины».

Ключевое слово auto-fill позволяет нам задавать ширину треков, а сетка будет вычислять, сколько элементов она сможет поместить в доступное пространство. В демо мы взяли grid-template-columns: repeat(auto-fill, 9em);. Так мы сказали браузеру создать колонки шириной в 9em и уместить как можно больше в контейнер.

Обратите внимание, что в расчетах также учитываются разделители grid-gap. У контейнера темный фон, чтобы четко было видно, сколько свободного пространства остается. В последнем примере видно, что остается незаполненное пространство. Как так получается?

Функция minmax()

Функция minmax() позволяет задать минимальный и максимальный размер трека, чтобы сетка работала в заданных границах. К примеру, можно задать три колонки. Первые две сделать шириной 1fr, а последней задать диапазон от максимального значения в 1fr до минимального в 160px:

grid-template-columns: 1fr 1fr minmax(160px, 1fr);

Если уменьшать ширину окна, все колонки начнут сжиматься, а последняя будет просто съезжать. Посмотрите.

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

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

Заключение

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

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

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

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

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

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

Автор: Ian Yates

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Научись верстать сайты, используя все возможности фреймворка Bootstrap.

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree