CSS Grid Layout: Применение областей сетки

От автора: эта статья является частью серии «CSS Grid Layout». Одна вещь, о которой мы упоминали, но пока что должным образом не рассматривали в этой серии — это какие области имеет CSS сетка. До сих пор наши элементы сетки содержались в одной ячейке сетки, но мы можем создавать более практически применимые макеты, нарушая эти границы. Давайте рассмотрим как!

Определение областей сетки

Вот сетка, с которой мы работали: девять элементов сетки, автоматически размещенных в трех равных столбцах, трех равных строках, разделенных зазорами в 20px.

В настоящее время наши элементы имеют только цветовые стили, но вернемся к тому, что мы узнали в первой статье, и добавим правила grid-column и grid-row, на этот раз дополнив их:

.item-1 { background: #b03532; grid-column: 1 / 3; grid-row: 1;
}

В этом сокращенном выражении grid-column мы эффективно используем grid-column-start и grid-column-end, сообщая, что элемент должен начинаться с линии сетки 1 и заканчиваться на лини 3 сетки.

Вот что это нам дает; первый элемент теперь распространяется на две ячейки, сдвигая другие элементы вправо и вниз в соответствии с алгоритмом автоматического размещения Grid.

То же самое можно сделать со строками, что даст нам гораздо большую область в верхнем левом углу сетки.

.item-1 { background: #b03532; grid-column: 1 / 3; grid-row: 1 / 3;
}

Объединение ячеек

Используя, возможно, более простой синтаксис, мы можем переключить конец столбца grid-column с помощью ключевого слова span. Используя span мы не привязаны к тому, чтобы указать, где заканчивается область, вместо этого мы определяем, на сколько линий должен распространяться элемент:

.item-1 { background: #b03532; grid-column: 1 / span 2; grid-row: 1 / span 2;
}

Это дает нам тот же результат, но если бы мы изменили место, где начинается элемент, его конец мы могли бы не указывать отдельно.

В следующей демо-версии вы видите, что мы очистили макет, удалив четыре элемента. Мы указали позиционирование для двух элемента: первый охватывает два столбца и две строки, в то время как четвертый начинается в столбце 3, строке 2 и распространяется вниз на две линии:

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

Примечание. Существует много ситуаций, когда исходный порядок должен полностью отражать представление — не забывайте о доступности.

Именованные области

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

В частности, они позволяют нам именовать области сетки. С помощью именования областей мы можем ссылаться на них (вместо номеров строк) для указания позиций. Давайте придерживаться нашей текущей демо-версии и используем ее, чтобы создать приближенный макет страницы, включающий:

Мы определяем эти области в контейнере сетки, как будто рисуем их:

.grid-1 { /* ..existing styles */ grid-template-areas: "header header header" "main main sidebar" "footer footer footer";
}

Позиционирование элементов

Теперь мы обращаем внимание на элементы, отбрасывая rid-column и grid-row, предпочитая им grid-area:

.item-1 { background: #b03532; grid-area: header;
}
.item-2 { background: #33a8a5; grid-area: main;
}
.item-3 { background: #30997a; grid-area: sidebar;
}
.item-4 { background: #6a478f; grid-area: footer;
}

Наш первый элемент заголовка, охватывая все три столбца. Второй элемент предназначен для основного контента, третий — боковая панель, а четвертый — подвал. И они не должны размещаться в таком же порядке, как указаны в коде, item-4 вполне может быть установлен, как заголовок.

Как вы можете видеть, это облегчает разметку макета страницы. На самом деле, если мы уж начали визуально представлять нашу сетку, почему бы не пойти еще дальше и использовать эмодзи?!

Вложенные сетки

Данная веб-страница будет содержать все виды вложенных компонентов, поэтому давайте рассмотрим, как это работает. Когда мы объявляем контейнер, как display: grid;, только его прямые потомки становятся элементами сетки. Содержимое, которое мы добавляем в эти дочерние элементы, не будет затрагиваться сеткой, если мы специально не объявим обратное. В нашем примере мы собираемся добавить в разметку.item-5 , .item-6 и .item-7, вложив их в .item-2.

<section class="grid-1"> <div class="item-1">1</div> <div class="item-2"> <div class="item-5">5</div> <div class="item-6">6</div> <div class="item-7">7</div> </div> <div class="item-3">3</div> <div class="item-4">4</div>
</section>

Таким образом, теперь нам нужно объявить .item-2, также как контейнер сетки, задав для него сетку с двумя столбцами и двумя строками.

display: grid; grid-template-columns: 1fr 30%;
grid-template-rows: auto auto;
grid-gap: 20px; grid-template-areas: "header header" "article sidebar";

Здесь мы можем использовать имена «header», «article» и «sidebar»; путаницы возникнуть не должно, потому что у нас есть контекст. Эти области сетки применяются только к сетке внутри .item-2.

Заключение

Подводя итог всему выше сказанному:

Мы рассмотрели несколько полезных аспектов спецификации CSS Grid Layout, и мы все ближе и ближе к реальным примерам использования! В следующей статье мы рассмотрим несколько более сложных макетов и увидим, как в это уравнение вписывается адаптивный дизайн.

Автор: Ian Yates

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

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