Как использовать grid-template-area для изменения порядка элементов

Как использовать grid-template-area для изменения порядка элементов

От автора: работая над сайтом FordLabs, мы с моим напарником столкнулись с, казалось бы, сложной ситуацией. У нас было три элемента, которые нужно было расположить горизонтально в порядке [1] [2] [3] на экранах планшетов и на настольных компьютерах, но затем расположить вертикально в порядке [1] [3] [2] на мобильных устройствах.

Хотя мы могли бы использовать какой-нибудь забавный JavaScript для переупорядочения элементов или дополнительный HTML и CSS для скрытия и отображения элементов в зависимости от размера области просмотра, я была достаточно знакома с сеткой CSS, чтобы подумать: «Должен быть более простой способ сделать это». К счастью для нас, такой оказался: grid-template-area.

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

Как использовать grid-template-area для изменения порядка элементов

Вот весь HTML-код, который нам понадобится для этого примера.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Для CSS мы начнем с указания для div оболочки display: grid и grid-gap: 1rem. Далее мы добавим grid-template-areas. grid-template-areas работает следующим образом: это способ присвоения связанного имени для каждого класса элемента сетки с помощью свойства grid-area, а затем мы организуем эти элементы по имени, используя для родительского класса свойство grid-template-areas.

Я пишу CSS следуя подходу mobile first, поэтому мы начнем с вертикальной сетки. Области шаблона сетки распознают каждую новую строку как новый ряд, поэтому все, что нам нужно сделать, это упорядочить элементы, как показано ниже.

На этом этапе компоновка сетка будет выглядеть примерно так:

Как использовать grid-template-area для изменения порядка элементов

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

И это все, что нам с партнером нужно было сделать! Однако для простоты я добавлю еще один пример CSS и изменю порядок сетки для представления планшета.

Как использовать grid-template-area для изменения порядка элементов

И вот оно! Простой способ упорядочить элементы HTML, используя только CSS. Для демонстрации, с которой вы можете взаимодействовать, посмотрите этот код:

Удачного кодирования!

Автор: Ashley R. Clifton

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

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

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