От автора: в этой статье мы узнаем, как можно разместить элементы на странице семью способами при помощи модуля Grid Layout. Основной упор мы сделаем на конкретные способы размещения элементов на странице с помощью CSS Grid. Давайте пройдемся по ним.
Как решить плохую поддержку Grid Layout
Как я уже писал раньше, у Grid Layout ужасная поддержка. По умолчанию его не поддерживает ни один основной браузер, а IE поддерживает только старую версию. Чтобы примеры правильно работали, вам нужно активировать флаг «Experimental Web Platform features» в Chrome и флаг «layout.css.grid.enabled» в Firefox. Для тех, кто сам не может активировать эти флаги, я подготовил скриншоты конечных версий каждого метода.
№1 задаем все в отдельных свойствах
С помощью этой версии мы размещали элементы в моих предыдущих статьях. Метод содержит много кода, но очень простой для понимания. Левая/правая и верхняя/нижняя границы элемента задаются через свойства grid-column-start/grid-column-end и grid-row-start/grid-row-end. Если элемент будет занимать только одну строку или колонку, свойства с –end можно опустить, что чуть-чуть сократит код CSS.
В демо ниже элемент А помещен на вторую строку во вторую колонку при помощи следующего CSS кода:
|
1 2 3 4 5 6 |
.a { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; } |
То же самое можно сделать по-другому:
|
1 2 3 4 |
.a { grid-column-start: 2; grid-row-start: 2; } |
№2 при помощи grid-row и grid-column
CSS код в первом примере был читаемым и простым, но нам пришлось использовать 4 свойства для размещения одного элемента. Вместо четырех можно использовать всего два: grid-column и grid-row. Оба свойства принимают два значения, разделенных слэшем. Первое значение задает стартовую линию, а второе – конечную линию элемента.
Синтаксис свойств:
|
1 2 3 4 |
.selector { grid-row: row-start / row-end; grid-column: col-start / col-end; } |
Чтобы поместить элемент С в правый нижний угол сетки, можно использовать следующий код:
|
1 2 3 4 |
.c { grid-row: 2 / 4; grid-column: 2 / 4; } |
№3 с помощью grid-area
Чисто технически, позиционируемый нами элемент занимает определенную область на веб-странице. Границы элемента определяются переданными нами значениями строк сетки. Все значения можно указать одновременно в свойстве grid-area.
Так будет выглядеть CSS со свойством:
|
1 2 3 |
.selector { grid-area: row-start / col-start / row-end / col-end; } |
Если вы забываете правильный порядок значений, просто запомните, что сперва нужно указать позицию левого верхнего угла (row-start – col-start), а затем правого нижнего угла элемента (row-end – col-end).
Как и в предыдущем примере, чтобы разместить элемент С в правый нижний угол сетки, нужно использовать следующий код:
|
1 2 3 |
.c { grid-area: 2 / 2 / 4 / 4; } |
№4 с помощью ключевого слова span
Чтобы не задавать конечную линию позиционируемого элемента, можно использовать ключевое слово span. С его помощью можно задать число колонок или строк, на которые растянется элемент.
Синтаксис ключевого слова span:
|
1 2 3 4 |
.selector { grid-row: row-start / span row-span-value; grid-column: col-start / span col-span-value; } |
Если элемент занимает всего один ряд или столбец, слово span и его значение можно не указывать.
В этот раз давайте поместим элемент С в верхний левый угол сетки. Сделать это можно следующим кодом.
|
1 2 3 4 |
.c { grid-row: 1 / span 2; grid-column: 1 / span 2; } |
№5 с помощью именованных линий
До сих пор мы позиционировали элемент с помощью номеров строк. Данный способ удобен, если макет довольно простой. Но если требуется разместить несколько элементов, в коде можно запутаться. В большинстве случаев элемент на странице подпадает под какую-то категорию. К примеру, хедер может идти от линии столбца c1 до c2 и от линии строки r1 до r2. Намного легче дать этим линиям имена и потом позиционировать элементы с их помощью.
Давайте создадим простой макет, чтобы понять концепцию. Сперва нужно изменить CSS контейнера сетки:
|
1 2 3 4 5 6 |
.container { display: grid; grid-gap: 10px; grid-template-columns: [head-col-start] 180px [content-col-start] 180px [content-col-mid] 180px [head-col-end]; grid-template-rows: [head-row-start] auto [head-row-end] auto [content-row-end] auto [footer-row-end]; } |
Что я сделал вверху: я присвоил всем линиям имена по типу контента, который они хранят. Идея заключается в том, чтобы прописать имена, которые будут давать нам представление о размещении элементов. В этом конкретном примере наш хедер растянут на все колонки. Поэтому очевидно, что стартовую и конечную линию столбца можно назвать «head-col-start» and «head-col-end», и они будут представлять левую и правую грани хедера. Все остальные линии можно назвать схожим образом. После присвоения имен всем линиям можно использовать код CSS ниже для позиционирования всех элементов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.header { grid-column: head-col-start / head-col-end; grid-row: head-row-start / head-row-end; } .sidebar { grid-column: head-col-start / content-col-start; grid-row: head-row-end / content-row-end; } .content { grid-column: content-col-start / head-col-end; grid-row: head-row-end / content-row-end; } .footer { grid-column: head-col-start / head-col-end; grid-row: content-row-end / footer-row-end; } |
Нам пришлось написать CSS кода чуть больше обычного, но если теперь взглянуть на код, сразу становится ясно, где расположены элементы.
№6 с помощью именованных линий, общих линий и ключевого слова span
В предыдущем методе все строки имели разные имена, обозначающие начало, середину и конец элемента. К примеру, «content-col-start» и «content-col-mid» обозначали начало и середину секции контента веб-страницы. Если секция контента растянута на большее количество строк, нам пришлось бы придумывать дополнительные имена линий типа «content-col-mid-one», «content-col-mid-two» и т.д.
В такой ситуации можно использовать общее имя «content» для всех линий сетки в секции контента и ключевое слово span, с помощью которого можно указать количество этих линий. Также можно указать число в имени линии, чтобы задать число строк или колонок, которые будет занимать элемент.
CSS данного метода:
|
1 2 3 4 |
.selector { grid-row: row-name row-start-number/ row-name row-end-number; grid-column: col-name col-start-number / span col-name col-to-span; } |
Как и в предыдущем методе, тут тоже необходимо изменить CSS контейнера сетки.
|
1 2 3 4 5 6 |
.container { display: grid; grid-gap: 10px; grid-template-columns: [one-eighty] 180px [one-eighty] 180px [one-eighty] 180px; grid-template-rows: [head-row] auto [content-row] auto [content-row] auto [content-row] auto [footer-row] auto; } |
У всех линий по строкам задано одно имя, которое представляет ширину в пикселях, все именованные линии строк представляют строки секций веб-страницы. В этом демо я добавил рекламную секцию под сайдбар. CSS код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.header { grid-column: one-eighty 1 / one-eighty 4; grid-row: head-row / content-row 1; } .sidebar { grid-column: one-eighty 1 / one-eighty 2; grid-row: content-row 1 / content-row 2; } .advert { grid-column: one-eighty 1 / one-eighty 2; grid-row: content-row 2 / content-row 3; } .content { grid-column: one-eighty 2 / one-eighty 4; grid-row: content-row 1 / span content-row 2; } .footer { grid-column: one-eighty 1 / span one-eighty 3; grid-row: content-row 3 / footer-row; } |
№7 с помощью именованных областей сетки
Чтобы не использовать лини, можно присвоить разным областям на странице имена и с их помощью размещать элементы. И опять нам придется внести изменения в CSS код контейнера сетки.
CSS код контейнера должен быть таким:
|
1 2 3 4 5 6 7 8 9 |
.wrapper { display: grid; grid-gap: 10px; grid-template-columns: 180px 180px 180px; grid-template-areas: "header header header" "content content advert" "content content ......" "footer footer footer"; } |
Одна точка (.) или последовательность точек создадут пустую/пустые ячейки. У всех строк должны быть одинаковые номера колонок. Вот почему нам пришлось добавить точки, а не оставлять значение пустым. Сейчас именованная область сетки может быть только прямоугольная. Однако в будущих версиях спецификации это может измениться. Рассмотрим CSS всех элементов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.header { grid-area: header; } .content { grid-area: content; } .advert { grid-area: advert; } .footer { grid-area: footer; } |
После определения всех областей их привязка к различным элементам не вызывает труда. Помните, что в именах областей нельзя использовать специальные символы, иначе объявление будет неправильным.
Заключение
Вот и все! Мы рассмотрели 7 методов размещения элементов при помощи макета CSS Grid. У вас есть какие-либо советы по статье? Какой из методов вы бы использовали в своих проектах? Пишите об этом в комментариях.
Редакция: Nitish Kumar
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
