7 способов размещения элементов с помощью макета CSS Grid

7 способов размещения элементов с помощью макета CSS Grid

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

Как решить плохую поддержку Grid Layout

Как я уже писал раньше, у Grid Layout ужасная поддержка. По умолчанию его не поддерживает ни один основной браузер, а IE поддерживает только старую версию. Чтобы примеры правильно работали, вам нужно активировать флаг «Experimental Web Platform features» в Chrome и флаг «layout.css.grid.enabled» в Firefox. Для тех, кто сам не может активировать эти флаги, я подготовил скриншоты конечных версий каждого метода.

№1 задаем все в отдельных свойствах

7 способов размещения элементов с помощью макета CSS Grid

С помощью этой версии мы размещали элементы в моих предыдущих статьях. Метод содержит много кода, но очень простой для понимания. Левая/правая и верхняя/нижняя границы элемента задаются через свойства grid-column-start/grid-column-end и grid-row-start/grid-row-end. Если элемент будет занимать только одну строку или колонку, свойства с –end можно опустить, что чуть-чуть сократит код CSS.

В демо ниже элемент А помещен на вторую строку во вторую колонку при помощи следующего CSS кода:


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

То же самое можно сделать по-другому:

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

№2 при помощи grid-row и grid-column

7 способов размещения элементов с помощью макета CSS Grid

CSS код в первом примере был читаемым и простым, но нам пришлось использовать 4 свойства для размещения одного элемента. Вместо четырех можно использовать всего два: grid-column и grid-row. Оба свойства принимают два значения, разделенных слэшем. Первое значение задает стартовую линию, а второе – конечную линию элемента.

Синтаксис свойств:

.selector {
  grid-row: row-start / row-end;
  grid-column: col-start / col-end;
}

Чтобы поместить элемент С в правый нижний угол сетки, можно использовать следующий код:

.c {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

№3 с помощью grid-area

7 способов размещения элементов с помощью макета CSS Grid

Чисто технически, позиционируемый нами элемент занимает определенную область на веб-странице. Границы элемента определяются переданными нами значениями строк сетки. Все значения можно указать одновременно в свойстве grid-area.

Так будет выглядеть CSS со свойством:

.selector {
  grid-area: row-start / col-start / row-end / col-end;
}

Если вы забываете правильный порядок значений, просто запомните, что сперва нужно указать позицию левого верхнего угла (row-start – col-start), а затем правого нижнего угла элемента (row-end – col-end).

Как и в предыдущем примере, чтобы разместить элемент С в правый нижний угол сетки, нужно использовать следующий код:

.c {
  grid-area: 2 / 2 / 4 / 4;
}

№4 с помощью ключевого слова span

7 способов размещения элементов с помощью макета CSS Grid

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

Синтаксис ключевого слова span:

.selector {
  grid-row: row-start / span row-span-value;
  grid-column: col-start / span col-span-value;
}

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

В этот раз давайте поместим элемент С в верхний левый угол сетки. Сделать это можно следующим кодом.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Узнать подробнее
.c {
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;
}

№5 с помощью именованных линий

7 способов размещения элементов с помощью макета CSS Grid

До сих пор мы позиционировали элемент с помощью номеров строк. Данный способ удобен, если макет довольно простой. Но если требуется разместить несколько элементов, в коде можно запутаться. В большинстве случаев элемент на странице подпадает под какую-то категорию. К примеру, хедер может идти от линии столбца c1 до c2 и от линии строки r1 до r2. Намного легче дать этим линиям имена и потом позиционировать элементы с их помощью.

Давайте создадим простой макет, чтобы понять концепцию. Сперва нужно изменить CSS контейнера сетки:

.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 ниже для позиционирования всех элементов.

.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

7 способов размещения элементов с помощью макета CSS Grid

В предыдущем методе все строки имели разные имена, обозначающие начало, середину и конец элемента. К примеру, «content-col-start» и «content-col-mid» обозначали начало и середину секции контента веб-страницы. Если секция контента растянута на большее количество строк, нам пришлось бы придумывать дополнительные имена линий типа «content-col-mid-one», «content-col-mid-two» и т.д.

В такой ситуации можно использовать общее имя «content» для всех линий сетки в секции контента и ключевое слово span, с помощью которого можно указать количество этих линий. Также можно указать число в имени линии, чтобы задать число строк или колонок, которые будет занимать элемент.

CSS данного метода:

.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 контейнера сетки.

.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 код:

.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 с помощью именованных областей сетки

7 способов размещения элементов с помощью макета CSS Grid

Чтобы не использовать лини, можно присвоить разным областям на странице имена и с их помощью размещать элементы. И опять нам придется внести изменения в CSS код контейнера сетки.

CSS код контейнера должен быть таким:

.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 всех элементов.

.header {
  grid-area: header;
}

.content {
  grid-area: content;
}

.advert {
  grid-area: advert;
}

.footer {
  grid-area: footer;
}

После определения всех областей их привязка к различным элементам не вызывает труда. Помните, что в именах областей нельзя использовать специальные символы, иначе объявление будет неправильным.

Заключение

Вот и все! Мы рассмотрели 7 методов размещения элементов при помощи макета CSS Grid. У вас есть какие-либо советы по статье? Какой из методов вы бы использовали в своих проектах? Пишите об этом в комментариях.

Редакция: Nitish Kumar

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

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree