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

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

Что я сделал вверху: я присвоил всем линиям имена по типу контента, который они хранят. Идея заключается в том, чтобы прописать имена, которые будут давать нам представление о размещении элементов. В этом конкретном примере наш хедер растянут на все колонки. Поэтому очевидно, что стартовую и конечную линию столбца можно назвать «head-col-start» and «head-col-end», и они будут представлять левую и правую грани хедера. Все остальные линии можно назвать схожим образом. После присвоения имен всем линиям можно использовать код CSS ниже для позиционирования всех элементов.

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

№6 с помощью именованных линий, общих линий и ключевого слова span

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

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

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

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

Как и в предыдущем методе, тут тоже необходимо изменить CSS контейнера сетки.

У всех линий по строкам задано одно имя, которое представляет ширину в пикселях, все именованные линии строк представляют строки секций веб-страницы. В этом демо я добавил рекламную секцию под сайдбар. CSS код:

№7 с помощью именованных областей сетки

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

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

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

Одна точка (.) или последовательность точек создадут пустую/пустые ячейки. У всех строк должны быть одинаковые номера колонок. Вот почему нам пришлось добавить точки, а не оставлять значение пустым. Сейчас именованная область сетки может быть только прямоугольная. Однако в будущих версиях спецификации это может измениться. Рассмотрим CSS всех элементов.

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

Заключение

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

Редакция: Nitish Kumar

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree