От автора: работая над сайтом FordLabs, мы с моим напарником столкнулись с, казалось бы, сложной ситуацией. У нас было три элемента, которые нужно было расположить горизонтально в порядке [1] [2] [3] на экранах планшетов и на настольных компьютерах, но затем расположить вертикально в порядке [1] [3] [2] на мобильных устройствах.
Хотя мы могли бы использовать какой-нибудь забавный JavaScript для переупорядочения элементов или дополнительный HTML и CSS для скрытия и отображения элементов в зависимости от размера области просмотра, я была достаточно знакома с сеткой CSS, чтобы подумать: «Должен быть более простой способ сделать это». К счастью для нас, такой оказался: grid-template-area.
Я приведу пример упрощенного кода, чтобы продемонстрировать, как мы справились с этой ситуацией. Результатом будет адаптивная сетка, которая выглядит примерно так:
Вот весь HTML-код, который нам понадобится для этого примера.
|
1 2 3 4 5 |
<div class="css-grid"> <div class="grid-item-1">Thing 1</div> <div class="grid-item-2">Thing 2</div> <div class="grid-item-3">Thing 3</div> </div> |
Для CSS мы начнем с указания для div оболочки display: grid и grid-gap: 1rem. Далее мы добавим grid-template-areas. grid-template-areas работает следующим образом: это способ присвоения связанного имени для каждого класса элемента сетки с помощью свойства grid-area, а затем мы организуем эти элементы по имени, используя для родительского класса свойство grid-template-areas.
Я пишу CSS следуя подходу mobile first, поэтому мы начнем с вертикальной сетки. Области шаблона сетки распознают каждую новую строку как новый ряд, поэтому все, что нам нужно сделать, это упорядочить элементы, как показано ниже.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.css-grid { display: grid; grid-gap: 1rem; grid-template-areas: 'gridItem1' 'gridItem3' 'gridItem2'; ... }.grid-item-1 { grid-area: gridItem1; ... }.grid-item-2 { grid-area: gridItem2; ... }.grid-item-3 { grid-area: gridItem3; ... } |
На этом этапе компоновка сетка будет выглядеть примерно так:
Теперь на планшетах и компьютерах мы хотим, чтобы элементы были расположены горизонтально. В рамках соответствующего медиа-запроса мы поместим все имена элементов сетки в одну строку после свойства grid-template-areas в том порядке, который нам нужен.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.css-grid { display: grid; grid-gap: 1rem; /* Mobile */ grid-template-areas: 'gridItem1' 'gridItem3' 'gridItem2'; ... }/* Tablet / Desktop */ @media (min-width: 768px) { .css-grid { grid-template-areas: 'gridItem1 gridItem2 gridItem3'; ... } } |
И это все, что нам с партнером нужно было сделать! Однако для простоты я добавлю еще один пример CSS и изменю порядок сетки для представления планшета.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.css-grid { display: grid; grid-gap: 1rem; /* Mobile */ grid-template-areas: 'gridItem1' 'gridItem3' 'gridItem2'; ... }/* Tablet */ @media (min-width: 768px) { .css-grid { grid-template-areas: 'gridItem3 gridItem2 gridItem1'; ... } } /* Desktop */ @media (min-width: 992px) { .css-grid { grid-template-areas: 'gridItem1 gridItem2 gridItem3'; ... } } |
И вот оно! Простой способ упорядочить элементы HTML, используя только CSS. Для демонстрации, с которой вы можете взаимодействовать, посмотрите этот код:
Удачного кодирования!
Автор: Ashley R. Clifton
Источник: //medium.com
Редакция: Команда webformyself.
