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

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

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

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

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

<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, поэтому мы начнем с вертикальной сетки. Области шаблона сетки распознают каждую новую строку как новый ряд, поэтому все, что нам нужно сделать, это упорядочить элементы, как показано ниже.

.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 в том порядке, который нам нужен.

.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 и изменю порядок сетки для представления планшета.

.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

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

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