01
Июл
2020

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

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

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

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

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

Как использовать 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-area для изменения порядка элементов

Теперь на планшетах и компьютерах мы хотим, чтобы элементы были расположены горизонтально. В рамках соответствующего медиа-запроса мы поместим все имена элементов сетки в одну строку после свойства 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';
        ...
    }
}

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

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

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

Автор: Ashley R. Clifton

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

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

Источник: https://webformyself.com/kak-ispolzovat-grid-template-area-dlya-izmeneniya-poryadka-elementov/

Share

Тебе может это понравится...

Добавить комментарий