Css grid responsive gallery

Никаких медиа-запросов! Верстка адаптивных макетов с CSS Grid

От автора: CSS Grid не только изменил то, как мы понимаем и строим макеты для Интернета, но также способствовал написанию более гибкого кода, заменив «хакерские» методы, которые мы использовали ранее, а в некоторых случаях убив необходимость полагаться на код для конкретных разрешений и окон присмотра. Что самое крутое на этом этапе эпохи веб-разработки, так это то, что мы способны делать все больше и больше с меньшим количеством строк кода.

В этой статье мы начнем знакомиться с тем, как делается с помощью CSS Grid адаптивная верстка. Создадим пару общих адаптивных схем навигации. Это проще, чем вы думаете, и, поскольку CSS Grid был создан с учетом оперативности, на это потребуется меньше кода, чем на написание медиа-запросов. Давай сделаем это!

Макет № 1: Hero-контент и список статей

Мы начнем с этого набора примеров, создав общий макет веб-сайта: Hero-раздел во всю ширину с сеткой карточек ниже.
Оба элемента будут реагировать на изменение размера окна и соответственно адаптироваться. Хотя на первый взгляд это может показаться большим количеством кода, адаптивное поведение реализуется с помощью всего шести строк кода CSS Grid и без написания @media-правил вообще . Давайте разберем код, чтобы увидеть, что происходит:

Hero-раздел

Давайте посмотрим на код для элемента .hero:

Онлайн курс по JavaScript

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

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

< p >Explore local breweries with just one click and stirred by starlight across the centuries light years great turbulent clouds circumnavigated paroxysm of global death . < / p >

У нас есть несколько стилей фона, чтобы включить фон с изображением пива, немного отступов, чтобы отделить контент от края экрана, а затем три строки стилей сетки:

Первая строка (display: grid;) меняет поведение элемента .hero на контейнер сетки. Это означает, что элементы внутри .hero теперь являются элементами сетки.

Вторая строка (align-items: center;) будет вертикально центрировать столбцы в нашей сетке. Но эти две строки ничего не делают сами по себе, пока мы не установим столбцы сетки.

И вот тут начинается третья строка. В этом единственном свойстве происходит много всего, поэтому давайте рассмотрим ее шаг за шагом.

Функция repeat()

Вообще для определения колонок и рядов в сетке CSS мы обычно добавляем значение для каждого трека после определения свойства, например:

Это довольно скучно. Мы можем использовать функцию repeat(), чтобы сделать это менее многословным и удобным для понимания. Функция принимает два параметра:

Количество раз повторения значения.

После рефакторинга кода с repeat() мы получим те же результаты:

Функция minmax()

Теперь приведенные выше примеры явно определяют размеры треков (1fr и 300px). Это может подходить для некоторых сценариев, но для нашего примера нам нужно иметь возможность автоматически рассчитать размер трека на основе ширины области просмотра и автоматически настроить количество отображаемых столбцов. Чтобы сделать это, мы определим диапазон значений с помощью функции minmax(). Что мы будем определять? Вы, наверное, уже догадались: значения minimum и maximum, согласно которым должны изменяться размеры.

В приведенном выше примере мы установили для нашего свойства minmax() значение 240px для минимального размера и 1fr для максимального размера. Единицы fr, если вы никогда не слышали о них, обозначают дробные единицы.

Использование Firefox Grid Inspector для проверки изменения размера трека при изменении размера окна просмотра

Это приводит к тому, что наши треки равны 1fr, когда в окне просмотра достаточно места (оно же разрешение монитора), и 240px, когда нам не хватает места для двух столбцов (как на мобильных устройствах). Вот почему они растягиваются, когда мы расширяем окно браузера — они занимают доступное пространство и делят его поровну между существующими колонками. Теперь переходим к последнему фрагменту головоломки!

Ключевое слово auto-fit

Ключевое слово auto-fit позволяет переносить ряды и колонки, когда в окне просмотра не хватает места, чтобы соответствовать 240px без переполнения содержимого. Теперь, имея последний фрагмент кода, мы можем достичь этого результата:

Столбец автоматически переносится, когда в области просмотра недостаточно места

Список статей

Теперь, когда мы тщательно рассмотрели поведение элементов внутри элемента hero, вероятно, что первые две строки кода CSS для списка пивоваренных заводов, приведенного ниже, могут показаться вам уже знакомыми:

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

Сетка реагирует на изменение количества треков и адаптирует макет

Вот и все, ребята! Полностью адаптивный макет сайта, используя всего шесть строк кода CSS. Неплохо, а? Обязательно проверьте исходный код и поэкспериментируйте с этим примером на CodePen.

Макет № 2: Галерея изображений на полную ширину

В следующем примере мы применим силу нашего недавно изученного сочетание repeat(), auto-fit и minmax(), чтобы создать эту адаптивную галерею изображений. Мы также будем определять размеры треков, используя grid-column и grid-row, и рассмотрим удобную комбинацию свойство: значение, grid-auto-flow: dense;, которая позволяет изменять поведение по умолчанию элементов, которые не могут поместиться в явные треки: вместо того, чтобы переносить их на новые ряды и колонки в, мы поместим их в неиспользуемые места на сетке. Давайте перейдем к кодированию!

Настройка сетки

Сетка создается с использованием знакомого нам свойства display: grid;, где столбцы определяются с помощью repeat(), auto-fit и minmax(). Мы также добавили связку строк с функцией repeat() и определили зазор для изображений, используя grid-gap. Но новый игрок здесь grid-auto-flow: dense;. Мы вернемся к этому через секунду.

Мы также создали шаблон повторения, используя псевдо-селектор nth-child(), чтобы установить разные размеры для наших треков, используя grid-column и grid-row. Обратите внимание, что мы используем ключевое слово span, чтобы выбранный элемент занимал более одного столбца или строки.

И наконец, мы позаботимся о том, чтобы наши изображения растягивались на всю область контейнера, независимо от того, используется ли 1x, 2x или 3x — с помощью object-fit: cover;. Если вы никогда не слышали об object-fit, оно работает примерно так же, как background-image, но для HTML-тегов img:

Реальная же магия происходит здесь — grid-auto-flow: dense;. Посмотрим, что произойдет, когда мы уберем это из нашего кода:

Удаление grid-auto-flow: dense; приводит к непоследовательному размещению элементов в сетке

Видите эти дыры в нашей красивой сетке? Это потому, что некоторые элементы занимают 2 или 3 ячейки, и когда в треках не хватает места, чтобы разместить их, они переносятся в новый ряд, так как это поведение по умолчанию. Изменив его с row на dense, мы указываем сетке заполнять любые пробелы, которые у нас могут быть, элементами, которые могли бы им соответствовать, независимо от порядка их расположения в DOM.

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

Макет# 3: Макет карточек в стиле Trello

Теперь перейдем к последней демо, где мы воспользуемся возможностью вкладывать сетки, чтобы воссоздать эту доску Trello. Мы создадим сетку для четырех разных столбцов, а внутри них мы создадим дочернюю сетку для карточек. Несмотря на то, что в этом примере не будут рассматриваться новые свойства или революционные методы, он поможет нам понять, насколько легко создавать сложные макеты с помощью нескольких строк кода CSS. В этой демонстрации много дополнительного кода для создания макета в стиле Trello, поэтому мы сосредоточимся исключительно на стилях сетки.

Колонки

Чтобы создать четыре колонки, мы используем display: grid; для контейнера и нашу волшебную строку grid-template-columns. Мы также определим зазор и используем align-items: flex-start;, чтобы столбцы не растягивались до нижней части экрана.

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

/* Раскомментируйте эти строки, если хотите получить стандартное поведение Trello вместо переноса колонок */

Мы рассмотрели grid-auto-flow в предыдущем примере и обнаружили, что это позволяет нам контролировать работу алгоритма автоматического размещения и то, как неявные элементы должны добавляться в поток сетки. Поведение по умолчанию row означает, что любой дополнительный элемент, который не помещается в сетке, будет перенесен на новую строку. Мы изменили это в предыдущей демонстрации на dense, а теперь установим значение column: таким образом, любая новая колонка, добавленная здесь, окажется в неявной колонке и будет иметь горизонтальную прокрутку. Мы также определим ширину для этих автоматически генерируемых колонок с помощью свойства grid-auto-columns.

Изменение значения свойства grid-auto-flow заставит это демо вести себя как реальный Trello

Карточки

Для сетки карточек мы будем использовать аналогичный подход. Мы применяем для контейнера display: grid;, но не будем определять здесь какие-либо столбцы, так как они нам не нужны. И мы применим grid-template-rows: auto;, чтобы все карточки не имели одинаковую высоту — мы хотим, чтобы некоторые из них были больше, а некоторые — меньше, на основе на типа контента, добавляемого в них.

И, снова, это и все! Еще две строки, чтобы установить зазор и поля для карточек, и все готово! Все остальное в Pen — это стандартный CSS для создания внешнего вида и стиля Trello.

И что… медиа-запросы уже мертвы?

Когда-то, когда мы создавали макеты с использованием display: inline-block или плавающие, применение медиа-запросов имело смысл для изменения размера элементов по мере уменьшения области просмотра. Но теперь, учитывая невероятно мощные макеты, которые мы можем создавать с помощью нескольких строк CSS, у вас может возникнуть искушение подумать, что медиа-запросы обречены. Я категорически не согласен с этим: я считаю, что мы должны изменить то, как мы думаем о них, и использовать их по-другому.

Как сказала Рэйчел Эндрю около года назад, мы должны использовать медиа-запросы для исправления нашего макета, когда он ломается, а не для таргетинга на устройства: их так много! С появлением Media Queries Уровня 4 и 5 мы теперь можем определять не только размеры экрана, но и типы указателей. В результате мы можем углубиться в системные настройки пользователя и адаптировать наш код для тех, кто предпочитает уменьшенное движение, или использовать их для инвертирования цветов. Это означает, что медиа-запросы не умерли; с другой стороны, я бы сказал, что это захватывающее время для использования медиа-запросов, но нам нужно научиться правильно их применять. Между тем, создание надежных макетов с использованием современных технологий, таких как Flexbox или CSS Grid, сэкономит вам массу времени и избавит от головной боли.

Автор: Juan Martín García

Онлайн курс по JavaScript

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

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

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

Источник