Содержание
Сетки CSS это новый подход к созданию адаптивных сайтов с множеством блоков, расположенных в любых местах сайта. Помимо CSS Grid существует также технология FlexBox , которая очень схожа с сетками. Разбираться в мельчайших различиях между ними мы не будем, так как на это понадобиться отдельная статья, но вкратце опишем основные отличия.
CSS Grid можно назвать более крутой и улучшенной версией FlexBox, ведь FlexBox позволяет работать лишь в одной плоскости: либо создавать столбцы, либо создавать ряды.
Сетки CSS позволяют делать больше, так как они работают в обеих плоскостях одновременно. Таким образом, создание адаптивных блоков сайта происходит намного проще, а возможности для расстановки объектов как вам вздумается — просто безграничны.
Предлагаем вам посмотреть полноценное видео по изучению сеток CSS, чтобы моментально вникнуть в суть CSS Grid :
Полезные ссылки из видео:
В ходе урока было создано три страницы, код каждой страницы вы можете скопировать ниже.
Первый файл
Второй файл
Третий файл
Принцип работы
Работа с сетками очень проста. Алгоритм действий здесь следующий:
- Создаем один основной блок и помещаем в него другие блоки (секции);
- Добавляем к основному блоку свойство display: grid ;
- Ко всем элементам основного блока теперь можно применять свойства сеток CSS;
- Добавляем различные свойства. Документацию по всем возможным свойствам вы можете прочитать здесь ;
Каждому блоку можно устанавливать ширину, высоту, его расположение. Блоки, которые создаются на основе сеток сразу имеют адаптивный дизайн, который подстраивает блоки под различные разрешения экранов.
Таким образом, вы можете писать меньше, а получать больше. Что еще может быть круче? Делитесь своим опытом использования сеток в своих проектах в комментариях к этой статье ⇣
От автора: CSS Grid не только изменил то, как мы понимаем и строим макеты для Интернета, но также способствовал написанию более гибкого кода, заменив «хакерские» методы, которые мы использовали ранее, а в некоторых случаях убив необходимость полагаться на код для конкретных разрешений и окон присмотра. Что самое крутое на этом этапе эпохи веб-разработки, так это то, что мы способны делать все больше и больше с меньшим количеством строк кода.
В этой статье мы начнем знакомиться с тем, как делается с помощью CSS Grid адаптивная верстка. Создадим пару общих адаптивных схем навигации. Это проще, чем вы думаете, и, поскольку CSS Grid был создан с учетом оперативности, на это потребуется меньше кода, чем на написание медиа-запросов. Давай сделаем это!
Макет № 1: Hero-контент и список статей
Мы начнем с этого набора примеров, создав общий макет веб-сайта: Hero-раздел во всю ширину с сеткой карточек ниже.
Оба элемента будут реагировать на изменение размера окна и соответственно адаптироваться. Хотя на первый взгляд это может показаться большим количеством кода, адаптивное поведение реализуется с помощью всего шести строк кода CSS Grid и без написания @media-правил вообще . Давайте разберем код, чтобы увидеть, что происходит:
Hero-раздел
Давайте посмотрим на код для элемента .hero:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
У нас есть несколько стилей фона, чтобы включить фон с изображением пива, немного отступов, чтобы отделить контент от края экрана, а затем три строки стилей сетки:
Первая строка (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 для списка пивоваренных заводов, приведенного ниже, могут показаться вам уже знакомыми:
Вот так! Мы используем точно такой же подход: в первой строке мы определяем сетку, во второй мы измеряем треки, используя одну и ту же магическую строку, а в третьей строке мы устанавливаем промежуток для этих столбцов. Ничего нового под солнцем, и что действительно приятно в этом — наш код достаточно устойчив, чтобы регулировать количество треков и их размеры в соответствии с количеством элементов, которые есть в нашем неупорядоченном списке:
Сетка реагирует на изменение количества треков и адаптирует макет
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Вот и все, ребята! Полностью адаптивный макет сайта, используя всего шесть строк кода 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:
Мы рассмотрели 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
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Всем привет, дорогие друзья! Сегодня мы на реальном примере сверстаем крутой адаптивный макет, используя технологию CSS Grid. В данном уроке мы не будем использовать никаких фреймворков для адаптивной верстки и в полной мере насладимся чистым CSS и новыми возможностями CSS Grid. В конце видео мы протестируем верстку на реальном мобильном устройстве 🙂
Результат HTML вёрстки: Смотреть
Полезные материалы и референсы:
- Рефересны, исходники: Скачать
- Урок «Gulp для самых маленьких»
- Урок «CSS Gr >
Премиум уроки от WebDesign Master
Создание контентного сайта на Jekyll от А до Я
Создание современного интернет-магазина от А до Я
Я — фрилансер! — Руководство успешного фрилансера