Как сделать grid адаптивным
Делаем адаптивный HTML, добавляя одну строку в CSS
В этой статье я расскажу вам, как использовать CSS Grid для создания супер классной сетки изображений, которая варьирует количество столбцов в зависимости от ширины экрана.
Рассмотрим все подробнее.
Настройка
В этой статье мы продолжим работу с сеткой, которую мы использовали в моей первой статье по CSS Grid. Затем мы добавим изображения. Вот как выглядит наша начальная сетка:
Примечание. В примере есть базовые стили, которые я не буду рассматривать здесь, поскольку они не имеет ничего общего с CSS Grid.
Если этот код вам непонятен, я бы рекомендовал вам прочитать мою статью «Учим CSS Grid за 5 минут», где я объясняю основы создания макетов.
Начнем с того, что сделаем колонки адаптивными.
Базовая адаптивность с единицей измерения fr (fractional unit)
Давайте изменим размер каждого столбца на 1fr.
Здесь происходит то, что сетка распределяет всю ширину на три части, и каждый из столбцов занимает по одной единице. Вот результат:
Другими словами, значение единицы fr позволяет вам легко изменять ширину столбцов.
Расширенная адаптивность
Однако приведенный выше пример не дает нам адаптивности, которую мы хотим, поскольку эта сетка всегда будет иметь ширину в три столбца. Мы хотим, чтобы наша сетка меняла количество столбцов в зависимости от ширины контейнера. Для этого вам нужно будет изучить три новые концепции.
repeat()
Мы начнем с функции repeat (). Это мощный способ указания столбцов и строк. Давайте возьмем исходную сетку и изменим ее используя repeat ():
auto-fit
Давайте вместо фиксированного количество столбцов, определим их автоматически, заменив 3 на auto-fit.
Это приводит к следующему поведению:
Браузер пытается разместить как можно больше столбцов шириной 100 пикселей в контейнере.
Однако, если мы захардкодим все столбцы ровно на 100 пикселей, мы никогда не получим необходимую гибкость, так как они редко будут заполнять всю ширину. Как вы можете видеть на гифке выше, сетка часто оставляет пустое пространство с правой стороны.
Обратите внимание, что вся адаптивность прописывается в одной строке CSS.
Это приводит к следующему поведению:
И, как вы видите, это прекрасно работает. Функция minmax () определяет диапазон размеров, который больше или равен min и меньше или равен max.
Таким образом, столбцы теперь будут всегда не менее 100 пикселей. Однако, если имеется больше свободного места, грид будет распределять место поровну каждому столбцу, поскольку столбцы будут занимать 1fr вместо 100 px.
Добавление изображений
Теперь последний шаг — добавить изображения. Это не имеет ничего общего с CSS Grid, но давайте рассмотрим код.
Мы начнем с добавления тега изображения внутри каждого элемента грида.
Вот и все. Теперь вы знаете одну из самых сложных концепций в CSS Grid.
Поддержка браузерами
Прежде чем мы закончим, мне также необходимо рассмотреть поддержку CSS Grid браузерами. На момент написания этой статьи 77% браузеров поддерживало CSS Grid, и этот процент растет.
Я верю, что 2018 год станет годом CSS Grid. Гриды достигнут своего прорыва и превратятся в необходимый инструмент для разработчиков интерфейсов. Как и то, что произошло с CSS Flexbox за последние пару лет.
Перевод выполнен при поддержке компании EDISON Software, которая профессионально занимается проектированием ПО (вот примеры ТЗ: раз, два, три), а так же созданием ПО для крупных заказчиков (микротомограф, мобильная связь, освещение города).
Как использовать CSS Grid для создания адаптивного веб-макета
В этой статье мы сосредоточимся на базовом дизайне с использованием строк, столбцов и областей для создания простого адаптивного веб-приложения с использованием CSS Grid.
CSS Grid: базовая терминология
Давайте начнем с того, что уделим несколько минут тому, чтобы понять некоторые из основных основ CSS Grid.
Начало работы с CSS Grid
Отображение контейнера сетки и элементов
Контейнер сетки является отправной точкой для отображения сетки на элементе. Чтобы начать работу с сеткой, мы должны сначала отобразить сетку в контейнере, используя свойство ниже:
В CSS Grid отношения между контейнером grid и его элементами (elements) являются отношениями родителя и потомков соответственно. Каждая сетка имеет контейнер, содержащий элементы, и каждый элемент, помещенный в сетку, является элементом сетки.
Когда вы делаете контейнер grid ( display: grid; ), все его прямые дочерние элементы автоматически становятся элементами сетки.
Использование единицы измерения fr и нотации repeat()
Блок fr представляет собой часть доступного пространства в сеточном контейнере и может быть использован для создания гибких дорожек сетки.
Приведенный выше фрагмент кода разделит доступное пространство на четыре части: две части будут назначены первой дорожке, в то время как оставшиеся две части будут назначены по одной дорожке каждая в соответствии с оставшимся доступным пространством. Это помогает обеспечить согласованность при построении вашей сетки.
Функция repeat() также помогает обеспечить согласованность и может быть использована для повторения всего или части трек листа например так:
Демо-версия: создание веб-приложения с CSS-Grid
Я включил полный набор кодов здесь, но ниже я разобью фрагменты кода с некоторыми внутренними комментариями, чтобы показать, как построить веб-приложение с помощью CSS Grid.
Сначала мы создадим простой HTML шаблон и заполним его фиктивным текстом, чтобы помочь установить некоторую структуру:
Здесь мы свяжем таблицу стилей (CSS) с нашим шаблоном HTML и реализуем макет с помощью CSS Grid. Мы добавили несколько комментариев к фрагментам кода для большей ясности.
CSS Grid: основные выводы
Для получения дополнительной информации о CSS Grid я рекомендую W3 CSS Grid Layout Module и MDN CSS Grid.
CSS Grid: адаптивная верстка. Полноценный гайд с примерами макетов
CSS Grid — это лучшая адаптивная верстка HTML-макетов. По крайней мере, она реально претендует на это звание, так как позволяет довольно легко и быстро построить адаптивный макет сайта. Основная идея, которую несет в себе адаптивная верстка при помощи CSS Grid, — это разделить веб-страницу на столбики и строки в виде сетки, образуя ячейки. А в образовавшиеся ячейки можно вставлять любые элементы страницы. При этом самими ячейками можно очень легко управлять:
изменять их размеры;
управлять их количеством;
располагать в любом нужном месте.
На сегодняшний день CSS Grid поддерживается почти всеми популярными браузерами, поэтому смело можно брать на вооружение эту технологию и изучать ее.
CSS Grid — адаптивная верстка
Как разбивается макет при помощи CSS Grid, показано на рисунке ниже. Основные элементы, которые содержит данная разбивка:
Красный цвет на рисунке — это Grid-контейнер, который содержит внутри себя сетку с ячейками.
Коричневый цвет на рисунке — это Grid-ячейки, которые образуют строки и столбцы Grid-сетки. В ячейках размещаются нужные HTML-элементы.
Зеленый цвет — это линии, разделяющие ячейки между собой. Сами по себе линии существуют только в воображении, на макете их видно не будет. Но они нужны для понимания, что это все-таки сетка, а также они помогают нумеровать ряды и колонки для дальнейшего взаимодействия с ними при помощи CSS.
Кстати, если ячейки отдалить друг от друга и увеличить своего рода margin, то образуется «разрыв» и «зеленые линии» станут пустотой.
Как создать CSS Grid?
Чтобы создать сетку CSS, нужно необходимому контейнеру задать CSS-свойство:
«display: inline-grid» — создает сетку в режиме строки, остальные элементы обтекают такой контейнер, а он сам получается «встроенным».
Таким grid-контейнером может быть весь body, а может быть лишь один отдельный какой-нибудь элемент. Все дочерние элементы, которые будут располагаться внутри этого контейнера, форматируются в CSS Grid.
Полное визуальное руководство/шпаргалка по CSS Grid
Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.
Грид — это макет для сайта (его схема, проект).
Грид-модель позволяет размещать контент сайта (располагать его определенным образом, позиционировать). Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных устройствах. Это означает, что сайт будет одинаково хорошо смотреться на компьютере, телефоне и планшете.
Вот простой пример макета сайта, созданного с помощью Грида.
Компьютер
Телефон
Архитектура CSS Grid
Как же Грид работает? Элементы Грида (grid items) располагаются вдоль главной или основной (main) и поперечной (cross) оси (axis). При помощи различных свойств мы можем манипулировать элементами для создания макетов.
К слову, если вас интересует Флекс, вот соответствующая статья.
Схема CSS Grid
Схема содержит все возможные свойства, предоставляемые Гридом. Эти свойства делятся на:
Обратите внимание: красным цветом отмечены сокращения для свойств:
К концу настоящей статьи у вас будет полное понимание того, как работает каждое из них.
Настройка проекта
Или вы можете просто открыть Codepen (или любую другую песочницу) и начать писать код.
Как создать адаптивный макет CSS Grid
Дата публикации: 2016-10-26
От автора: статья из серии понятие макета CSS Grid. В прошлых уроках мы изучили синтаксис сеток, изучили несколько способов расположения элементов на странице и попрощались с некоторыми старыми привычками. В этом уроке мы применим все наши знания для создания адаптивного макета на практике.
Медиа запросы
Возьмем демо из предыдущего урока.
Страница состоит из двух сеток: главная сетка и вложенная внутрь одного из элементов. Мы можем контролировать наши сетки с помощью медиа запросов. Это значит, что мы можем полностью перестраивать макет под другую ширину экрана.
Начнем мы с копирования объявления первой сетки. Обернем дубликат в медиа запрос по технике mobile-first. В качестве точки перехода я взял произвольно 500px.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Теперь мы поменяем нашу сетку в первом объявлении, поместив все в один столбец. Задаем один столбец мы с помощью свойства grid-template-columns. Проверьте, чтобы наши четыре строки были заданы через свойство grid-template-rows и соответствовали макету при помощи свойства grid-template-areas:
Наша вложенная сетка
Код выше изменяет наш главный макет. Однако у нас еще есть вложенная сетка, которая упрямо не хочет избавляться от своих двух колонок на любых экранах. Чтобы исправить это, мы сделаем ровно то же самое, но возьмем другую точку перехода по методу content-first:
На CodePen можно посмотреть конечный результат. Стоит обратить внимание на:
Как мы говорили раньше, вы можете изменять визуальный порядок элементов сетки независимо от их исходного порядка, а медиа запросы позволяют выстраивать элементы по-разному на экранах разной ширины. Однако мы не можем визуально переместить вложенные элементы. Они всегда должны быть дочерними элементами соответствующих родительских блоков. Как визуально, так и по коду.
Свойство transition никак не взаимодействует с макетом CSS Grid. Вы не сможете сделать перестроение от одного макета к другому плавным, когда работают медиа запросы.
Автозаполнение и функция minmax()
Существует еще один адаптивный метод, хорошо подходящий для плиточных макетов, который можно применить к CSS Grid. Размер блоков и их расположение вычисляются автоматически в зависимости от ширины экрана.
Автозаполнение
До сих пор наш подход заключался в том, что мы задавали количество дорожек и смотрели, чтобы элементы правильно заполняли их. Именно это можно наблюдать в демо ниже. Мы задали свойство grid-template-columns: repeat(4, 1fr);, которое говорит браузеру: «создай четыре колонки и сделай их одинаковой ширины».
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Ключевое слово auto-fill позволяет нам задавать ширину треков, а сетка будет вычислять, сколько элементов она сможет поместить в доступное пространство. В демо мы взяли grid-template-columns: repeat(auto-fill, 9em);. Так мы сказали браузеру создать колонки шириной в 9em и уместить как можно больше в контейнер.
Обратите внимание, что в расчетах также учитываются разделители grid-gap. У контейнера темный фон, чтобы четко было видно, сколько свободного пространства остается. В последнем примере видно, что остается незаполненное пространство. Как так получается?
Функция minmax()
Функция minmax() позволяет задать минимальный и максимальный размер трека, чтобы сетка работала в заданных границах. К примеру, можно задать три колонки. Первые две сделать шириной 1fr, а последней задать диапазон от максимального значения в 1fr до минимального в 160px: