Flexboxgrid2 как использовать

автор: admin
31.10.2023

Какую сетку использовать?

Какую сетку использовать в 2019 году для адаптивной верстки? бустрап, flexboxgrid2 или может быть что-то еще?

Вопрос задан более трёх лет назад
575 просмотров

4 комментария

Простой 4 комментария

potapchino

alex @potapchino
чем 2019 отличается от 2018 в плане сеток?
unlik @unlik Автор вопроса

Alex, потому что раньше не пользовался ими. Только изучаю верстку. И думаю что использовать для адаптивности, готовую сетку или делать свою.

potapchino

alex @potapchino
unlik, берите ту, которая решает вашу задачу. год тут вообще не при чем

Vlatqa

Владислав Лысков @Vlatqa Куратор тега CSS
12 колонок
Решения вопроса 0
Ответы на вопрос 1

sfi0zy

Ivan Bogachev @sfi0zy Куратор тега CSS
Creative frontend developer

Только изучаю верстку. И думаю что использовать для адаптивности, готовую сетку или делать свою.

Посмотрите на готовые сетки. Сделайте свою. Это не сложно. Это не то, что нужно «делать». Сетка — это чуть ли не самое простое, что вообще у нас в верстке есть. Использовать свою или чужую — не важно. Важно — понимать, какие задачи она решает.

И есть еще один момент: вписывается ли конкретная сетка в конкретный проект. Например мне нравится вот эта сетка. Я ее часто использую, она простая, удобная, очень похожа на тот же flexboxgrid, но с классами в духе rscss. Все круто. Но в проект, где используют БЭМ, я ее не принесу, как бы она мне не нравилась. Просто она туда не впишется. Или если нужна поддержка старых IE — там без флексов она не будет работать. Или может быть дизайн, требующий семь брейкпоинтов. Или 11 колонок. Всякое в жизни бывает. И идеально подходящая в одних ситуациях сетка совершенно не подойдет в других. Нет универсального варианта для всех возможных проектов.

Адаптивное меню на CSS flexbox

Всем привет! На начало 2018 года, по данным сайта Can I Use, верстка на flexbox-ах, поддерживается браузерами на 97.8%. Это отличные показатели для этой уже далеко не новой технологии по верстки сайтов. Теперь уже нет причин, почему не пользоваться этим удобным способом верстки. Чем мы сейчас и займемся.

Сверстав несколько макетов на CSS flexbox-ах, уже не хочется возвращаться к устаревшим float-ам и даже к такому любимому среди верстальщиков фреймворку, как Bootstrap. Хотя, Bootstrap ещё рано списывать со счетов, ведь используя его знаменитую сетку, можно «не париться» по поводу медиа запросов.

На этом уроке мы сверстаем шапку сайта с типичным адаптивным меню с применением flexbox CSS метода.

Адаптивное меню на CSS flexbox.

Шапка состоит из трех логичных блоков:

Блок с логотипом
Блок с меню, сделанное на списках
Блок с иконкой и номером телефона

Эти три блока будут помещены в общий внешний блок-обертку header, который внутри себя будет делать display: flex; для трех блоков.

Адаптивное меню на CSS flexbox.

Внутри блока nav, еще раз пропишем display: flex; для пунктов меню. Таким образом мы добьёмся гибкости, при уменьшении размеров экрана, пункты меню могут выстраиваться друг под другом.

Для наглядной демонстрации сделаем всю HTML разметку для шапки сайта.

+380973457685

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

Адаптивное меню на CSS flexbox.

А сейчас внимание! Достаточно указать двум блокам display: flex; и всё содержимое шапки вытянется в строчку.

.header .menu ul display: flex;
>

Вот так работает flexbox.

Адаптивное меню на CSS flexbox.

Добавим стили и шапка готова. Дальше нам нужно будет её адаптировать под разные размеры экранов. Обратите внимание, как мало написано кода.

body background-color: #fff;
font-family: «Open Sans», sans serif;
line-height: 1.5;
>

.header border: 2px solid #ccc;
display: flex;
flex-wrap: wrap; /*перенос строки */
justify-content: space-between; /*прижимает содержимое к краям */
align-items: center; /*выравнивает элементы по центру на вертикальной */
>

.header .logo padding-left: 30px;
>

.header .menu ul display: flex;
list-style: none;
>

.header .menu ul li margin: 20px 10px;
>

.header .menu ul a text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #06a327;
>

.phone font-size: 110%;
color: #333;
padding-right: 40px;
>

Работаем над адаптивностью шапки

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

Например, на ширине экрана 900 пикселей, блок с телефон прижался к левому краю шапки.

Адаптивное меню на CSS flexbox.

Решение проблемы, вы видите ниже. Выравниваем блок .phone по центру.

@media screen and (max-width: 900px) .phone margin: auto;
>
>

На ширине экрана 500 пикселей начинает срезаться меню, так как не помещается в строчку.

Адаптивное меню на CSS flexbox.

Легким движением руки для ul, прописываем свойство flex-direction: column; которое возвращает списки в естественное блочное состояние.

@media screen and (max-width: 500px) .header flex-direction: column;
>
.header .menu ul flex-direction: column;
align-self: center;
>
.header .menu ul li margin: 5px;
>
>

Адаптивное меню на CSS flexbox.

Разобраться с адаптивной версткой на flexbox-ах, Вам поможет этот видеокурс «Вёрстка сайта с нуля»

Создано 08.03.2018 10:18:00

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
Она выглядит вот так:
Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 2 ):

Web-дизайнер. 08.03.2018 13:01:25

Доброго времени суток Михаил! От себя хочу предложить маленькую поправочку в стили, а именно: в коде CSS с указанием размеров отступов margin: 0; padding: 0; Указывать не просто ноль (0), а дописывать 0px, так как просто ноль не срабатывает.

porsake 08.03.2018 13:30:21

уверяю Вас, что работают оба варианта.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал

Представляю вашему вниманию полное визуальное руководство-шпаргалку по всем свойствам CSS-модулей Flexbox и Grid.

В конце статьи вас ждет небольшой туториал по созданию тренажера по Flexbox.

Без дальнейших предисловий.

Оглавление

Flexbox (Flex, далее по тексту — Флекс)

Терминология

Флекс — это не отдельное свойство, но целый модуль, включающий набор свойств. Некоторые из этих свойств добавляются к контейнеру (родительскому элементу, известному как «флекс-контейнер» (flex container, далее по тексту — контейнер)), другие — к дочерним элементам (известным как «флекс-элементы» (flex items, далее по тексту — элементы)).

«Обычный» макет основан на потоке из блочных и строчных элементов, а флекс-макет — на «флекс-потоке» (flex-flow directions). Посмотрите на это изображение из спецификации, демонстрирующее ключевые идеи, лежащие в основе флекс-макета.

Элементы располагаются вдоль основной (главной) оси (main axis) (от main-start до main-end) или вдоль поперечной оси (cross axis) (от cross-start до cross-end).

основная ось — главная ось контейнера, ось, вдоль которой располагаются элементы. Она не обязательно является горизонтальной; это зависит от свойства «flex-direction» (направление, см. ниже)
main-start | main-end — элементы располагаются в контейнере от main-start до main-end
основной размер (main size) — ширина или высота элемента в зависимости от основного измерения (main dimension), основной размер элемента
поперечная ось — ось, перпендикулярная основной. Ее направление зависит от направления основной оси
cross-start | cross-end — строки контейнера заполняются элементами, которые располагаются от cross-end до cross-start
поперечный размер (cross size) — ширина или высота элемента в зависимости от основного измерения

Свойства флекс-контейнера

display

Данное свойство определяет флекс-контейнер; блочный или строчный в зависимости от присвоенного значения. Оно включает «флекс-контекст» для всех прямых потомков контейнера.

.container < display: flex; /* или inline-flex */ >

Обратите внимание, что свойства CSS-колонок в контейнере не работают.

flex-direction (направление)

Данное свойство определяет основную ось, направление, по которому размещаются элементы в контейнере. Флекс сам по себе (без расширяющих его функционал оберток) реализует концепцию однонаправленного макета. Поэтому элементы размещаются либо в горизональных строках, либо в вертикальных колонках.

.container

row (по умолчанию): элементы располагаются слева направо в ltr или справа налево в rtl
row-reverse: обратный row порядок расположения элементов — справа налево в ltr или слева направо в rtl
column: аналогично row, но сверху вниз
column-reverse: аналогично row-reverse, но снизу вверх

flex-wrap (перенос, переход, разделение)

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

.container

nowrap (по умолчанию): все элементы располагаются на одной строке
wrap: элементы могут располагаться на нескольких строках сверху вниз
wrap-reverse: элементы могут располагаться на нескольких строках снизу вверх

flex-flow (поток)

Данное свойство является сокращением для flex-direction и flex-wrap, которые определяют основную и поперечную оси контейнера. Значением по умолчанию является row nowrap.

.container

justify-content (выравнивание контента в одной строке)

Данное свойство определяет выравнивание элементов вдоль основной оси. Оно позволяет распределять свободное пространство, оставшееся неиспользованным элементами с фиксированным размером или гибкими элементами, достигшими максимального размера. Оно также позволяет управлять выравниванием при переполнении строки элементами.

.container

flex-start (по умолчанию): элементы сдвигаются в начало контейнера вдоль основной оси
flex-end: элементы сдвигаются в конец контейнера
start: элементы сдвигаются в начало контейнера, определяемое значением свойства «writing-mode» (направление письма)
end: элементы сдвигаются в конец контейнера, определяемый значением свойства «writing-mode»
left: элементы прижимаются к левому краю контейнера; без flex-direction поведение аналогично start
right: элементы прижимаются к правому краю контейнера; без flex-direction поведение аналогично start
center: элементы выравниваются по центру
space-between: элементы выравниваются таким образом, что первый элемент находится в начале строки, последний — в конце, а остальные элементы равномерно распределяются по оставшемуся пространству
space-around: элементы равномерно распределяются с одинаковым пространством по краям. Обратите внимание, что визуально пространство между элементами и краями контейнера не является одинаковым; это объясняется тем, что элементы занимают определенное пространство по обеим сторонам. Первый элемент занимает одну часть пространства от края контейнера, но две части до второго элемента, поскольку второй элемент также занимает одну часть пространства со стороны первого элемента
space-evenly: элементы размещаются таким образом, чтобы пространство между любыми двумя элементами являлось одинаковым

Что касается дополнительных ключевых слов «safe» и «unsafe», то использование safe позволяет избежать отрисовки элементов за пределами страницы, независимо от позиционирования, что, в свою очередь, исключает возможность появления прокрутки.

align-items (выравнивание элементов)

Данное свойство определяет, как элементы располагаются вдоль поперечной оси. Его можно сравнить с justify-content применительно к поперечной оси (перпендикулярной основной).

.container

stretch (по умолчанию): элементы растягиваются, чтобы заполнить весь контейнер (зависит от их min-width/max-width)
flex-start / start / self-start: элементы смещаются к началу поперечной оси. Различия между указанными свойствами несущественны и зависят от flex-direction или writing-mode
flex-end / end / self-end: элементы смещаются в конец поперечной оси. Различия между указанными свойствами несущественны и зависят от flex-direction или writing-mode
center: элементы выравниваются по центру
baseline: элементы выравниваются вдоль их основной линии

align-content (выравнивание содержимого в нескольких строках)

Данное свойство определяет выравнивание строк контейнера при наличии свободного пространство вдоль поперечной оси. Оно похоже на justify-content, которое распределяет пространство между отдельными элементами вдоль основной оси.

Обратите внимание, что рассматриваемое свойство применяется только в отношении содержимого контейнера, располагающегося на нескольких строках, когда свойство «flex-wrap» установлено в значение «wrap» или «wrap-reverse». В отношении однострочного контейнера (когда свойство «flex-wrap» имеет стандартное значение «no-wrap») применение align-content не будет иметь никакого эффекта.

.container

normal (по умолчанию): строки находится на обычных позициях
flex-start / start: строки сдвигаются в начало контейнера. flex-start зависит от flex-direction, а start — от writing-mode
flex-end / end: строки сдвигаются в конец контейнера. flex-end зависит от flex-direction, а end — от writing-mode
center: строки выравниваются по центру
space-between: строки располагаются таким образом, что первая строка находится в начале контейнера, последняя — в конце, а остальные строки распределяются равномерно
space-around: строки располагаются с одинаковым пространством между ними
space-evenly: строки располагаются с одинаковым пространством вокруг каждой из них
stretch: строки растягиваются, занимая все доступное пространство

Свойства флекс-элементов

order (порядок)

По умолчанию, элементы располагаются в контейнере в том порядке, в котором указаны в разметке. Данное свойство позволяет этим управлять.

.item < order: 5; /* по умолчанию равняется 0 */ >

flex-grow (рост, расширение)

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

Если все элементы имеют свойство «flex-grow» со значением 1, доступное пространство будет между ними распределяться равномерно. Если значением flex-grow одного из элементов является 2, данный элемент будет занимать двойную порцию пространства по сравнению с остальными элементами (или, по крайней мере, попытается это сделать).

.item < flex-grow: 4; /* по умолчанию 0 */ >

Отрицательные значения невалидны.

flex-shrink (сжатие, сокращение)

Данное свойство определяет способность элемента к сжатию при необходимости.

.item < flex-shrink: 3; /* по умолчанию 1 */ >

Отрицательные значения невалидны.

flex-basis

Данное свойство определяет стандартный размер элемента перед распределением оставшегося пространства. Этим размером может быть длина (например, 20%, 5rem и т.д.) или ключевое слово. Ключевое слово «auto» означает использование значения свойства «width» или «height» элемента (раньше вместо auto использовалось main-size). Ключевое слово «content» означает учет содержимого элемента. Указанное ключевое слово пока плохо поддерживается, поэтому сложно определить разницу между min-content, max-content и fit-content.

.item < flex-basis: | auto; /* по умолчанию auto */ >

Если значением этого свойства является 0, окружающее элемента пространство не принимается в расчет. Если значением является «auto», доступное пространство распределяется согласно значению свойства «flex-grow».

flex

Данное свойство является сокращением для flex-grow, flex-shrink и flex-basis. Второй и третий параметры (flex-shrink и flex-basis) являются опциональными. Значением по умолчанию является 0 1 auto, при этом auto можно опустить.

.item < flex: none | [ ? || ] >

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

align-self(выравнивание отдельного элемента)

Данное свойство позволяет перезаписывать дефолтное или установленное с помощью align-self выравнивание отдельного элемента.

См. объяснение align-items для доступных значений.

.item

Обратите внимание, что float, clear и vertical-align применительно к флекс-элементу не имеют никакого эффекта.

Примеры

Начнем с очень простого примера — решения проблемы выравнивания элемента по центру.

.parent < display: flex; height: 300px; /* Или любое другое значение */ >.child < width: 100px; /* Или любое другое значение */ height: 100px; /* Или любое другое значение */ margin: auto; /* Волшебство! */ >

Это работает благодарю тому, что свойство «margin» со значением «auto» поглащает все доступное пространство флекс-контейнера. Поэтому установка значения вертикальных внешних отступов в auto приводит к идеальному центрированию элемента по обеим осям.

Теперь попробуем использовать больше свойств. У нас имеется 6 элементов фиксированного размера, способных перестраиваться в зависимости от ширины экрана без участия медиа-запросов. Мы хотим, чтобы доступное пространство основной оси распределялось между элементами равномерно.

.flex-container < /* Сначала мы создаем контекст флекс-макета */ display: flex; /* Затем мы определяем направление потока, позволяя элементам переходить на следующую строку при необходимости * Указанное свойство и его значения аналогичны следующему: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Наконец, мы определяем, как должно распределяться оставшееся пространство */ justify-content: space-around; >

Готово. Осталось немного стилизовать:

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

/* Большие экраны */ .navigation < display: flex; flex-flow: row wrap; /* Это выравнивает элементы по правому краю вдоль основной оси */ justify-content: flex-end; >/* Средние экраны */ @media (max-width: 800px) < .navigation < /* На средних экранах мы выравниваем меню по центру за счет равномерного распределения доступного пространства между элементами */ justify-content: space-around; >> /* Маленькие экраны */ @media (max-width: 500px) < .navigation < /* На маленьких экранах мы меняем направление основной оси с горизонтального (строка) на вертикальное (колонка) */ flex-direction: column; >>

Поэкпериментируем с гибкостью элементов. Как насчет создания mobile-first трехколоночного макета с полноразмерной шапкой и подвалом, который не зависит от порядка расположения элементов в разметке.

.wrapper < display: flex; flex-flow: row wrap; >/* С помощью flex-basis мы устанавливаем значение ширины элементов в 100% */ .wrapper > * < flex: 1 100%; >/* Порядок расположения элементов в разметке следующий * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Средние экраны */ @media all and (min-width: 600px) < /* Мы указываем сайдбарам делить между собой строку */ .aside < flex: 1 auto; >> /* Большие экраны */ @media all and (min-width: 800px) < /* Мы меняем первый сайдбар и main местами * И указываем main занимать в 2 раза больше места, чем сайдбары */ .main < flex: 2 0px; >.aside-1 < order: 1; >.main < order: 2; >.aside-2 < order: 3; >.footer < order: 4; >>

Полезные ресурсы

Поддержка

Grid (далее по тексту — Грид или Сетка)

CSS Grid Layout на сегодняшний день является самым мощным средством создания макетов страниц. Он представляет собой двунаправленную систему. Это означает, что он может работать как со строками, так и с колонками, в отличие от Флекс, который умеет работать только со строками. Грид включает в себя свойства родительского элемента (Grid Container, грид-контейнер, далее по тексту — контейнер) и свойства дочерних элементов (Grid Elements, грид-элементы, далее по тексту — элементы).

Терминология

Грид-контейнер (Grid Container, далее по тексту — контейнер)

Элемент, которому присвоено свойство «display» со значением «grid», становится грид-контейнером. Данный контейнер является прямым предком всех грид-элементов. В следующем примере элемент «div» с классом «container» является грид-контейнером.

Грид-линия (Grid Line, далее по тексту — линия)

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

Грид-трек (Grid Track, далее по тексту — трек или дорожка)

Пространство между двумя смежными линиями. Вы можете думать о треках как о строках или колонках Грида. Вот пример дорожки между второй и третьей линиями.

Грид-область (Grid Area, далее по тексту — область)

Общее пространство между четырьмя линиями. Область может занимать любое количество грид-ячеек. Вот пример области между горизонтальными линиями 1 и 3 и вертикальными линиями 1 и 3.

Грид-элемент (Grid Element, далее по тексту — элемент)

Дочерний элемент (прямой потомок) контейнера. В следующем примере элементы с классом «item» являются грид-элементами, а элемент с классом «sub-item» — нет.

Грид-ячейка (Grid Cell, далее по тексту — ячейка)

Пространство между двумя смежными горизонтальными и вертикальными линиями. Это элементарная единица Сетки. Вот пример ячейки между горизонтальными линиями 1 и 2 и вертикальными линиями 2 и 3.

Пример

Колонки с гибкой шириной, которые автоматически перестраиваются в зависимости от ширины экрана без медиа-запросов.

.grid < display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Для маленьких экранов можно добавить min() */ /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */ grid-gap: 1rem; /* Данное свойство является стандартным, но хуже поддерживается */ /* gap: 1rem */ >

Свойства грид-контейнера

display

Данное свойство делает элемент грид-контейнером и устанавливает грид-контекст для его содержимого.

.container

grid — блочная Сетка
inline-grid — строчная Сетка

grid-template-columns, grid-template-rows

Данные свойства определяют колонки и строки Сетки с разделенными пробелами значениями. Значения представляют собой размер трека, а пробелы — линию.

.container

— длина, проценты или фракции свободного пространства Грида (используется единица измерения «fr»)
— произвольное название

.container

Вы можете явно указывать названия линий. Обратите внимание на квадратные скобки:

.container

Линии могут иметь несколько названий. Здесь, например, вторая линия имеет два названия:

.container

Если определение содержит повторяющиеся фрагменты, можно использовать инструкцию «repeat» для сокращения:

.container

Что эквивалентно следующему:

.container

Если несколько линий имеют одинаковые имена, можно использовать название линии и количество таких линий.

.item

Единица «fr» позволяет установить размер трека как фракцию свободного пространства контейнера. В примере ниже ширина каждого элемента равняется трети ширины контейнера:

.container

Свободное пространство вычисляется после вычитания элементов фиксированного размера. В следующем примере пространство, доступное для распределения с помощью единицы «fr» не включает 50px:

.container

grid-template-areas

Данное свойство определяет шаблон Сетки с помощью названий областей, определенных в свойствах «grid-area». Повторение названий областей заставляет контент расширяться на указанное количество ячеек. Точка означает пустую ячейку. Такой синтаксис позволяет визуализировать структуру Сетки.

.container

— название области
. — пустая ячейка
none — область отсутствует

.item-a < grid-area: header; >.item-b < grid-area: main; >.item-c < grid-area: sidebar; >.item-d < grid-area: footer; >.container

Этот код создает Сетку шириной в четыре колонки и высотой в три строки. Первая (верхняя) строка полностью занимается шапкой. Средняя строка состоит из двух областей «main», одной пустой ячейки и одной области «sidebar». Последняя строка — подвал.

Каждая строка в определении должна состоять из одинакового количества колонок.

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

Обратите внимание, что данный синтаксис применяется для обозначения областей, а не линий. При использовании этого синтаксиса линия каждой стороны области именуется автоматически. Если названием области является «foo», то названием начальных (первых) линий (строчной и колоночной) области будет «foo-start», а последних — «foo-end». Это означает, что некоторые линии могут иметь несколько названий, как в рассмотренном примере, где верхняя левая линия имеет три названия: header-start, main-start и footer-start.

grid-template

Данное свойство является сокращением для grid-template-rows, grid-template-columns и grid-template-areas.

.container < grid-template: none | / ; >

none — сбрасывает значения всех трех свойств до дефолтных
/ — устанавливает свойствам «grid-template-rows» и «grid-template-columns» соответствующие значения, а свойству «grid-template-areas» значение «none»

.container < grid-template: [row1-start] "header header header" 25px [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto; >

Это эквивалентно следующему:

.container

Поскольку grid-template не сбрасывает неявные свойства Сетки (такие как grid-auto-columns, grid-auto-rows и grid-auto-flow), что требуется в большинстве случаев, вместо него рекомендуется использовать свойство «grid».

column-gap, row-gap, grid-column-gap, grid-row-gap

Данные свойства определяют размеры линий. Другими словами, они определяют величину отступов между колонками/строками.

.container < /* стандарт */ column-gap: ; row-gap: ; /* раньше */ grid-column-gap: ; grid-row-gap: ; >

.container

Отступы создаются только между колонками/строками, но не по краям Сетки.

Обратите внимание, что свойства «grid-column-gap» и «grid-row-gap» в настоящее время переименованы в «column-gap» и «row-gap».

gap, grid-gap

Данное свойство является сокращением для row-gap и column-gap.

.container < /* стандарт */ gap: ; /* раньше */ grid-gap: ; >

.container

Если значение свойства «row-gap» не установлено, оно принимает значение свойства «column-gap».

Обратите внимание, что свойство «grid-gap» в настоящее время переименовано в «gap».

justify-items

Данное свойство определяет выравнивание элементов в ячейках вдоль строчной (горизонтально) оси (в противоположность своству «align-items», определяющему выравнивание вдоль блочной (колоночной, вертикальной) оси). Значение этого свойства применяется ко всем элементам контейнера.

.container

start — элементы сдвигаются в начало их ячеек (левая граница)
end — элементы сдвигаются в конец ячеек (правая граница)
center — элементы распологатся по центру
stretch — элементы заполняют всю ширину ячеек

.container

.container

.container

.container

Расположение отдельного элемента вдоль строчной оси ячейки контролируется свойством «justify-self».

align-items

Данное свойство определяет выравнивание элементов в ячейках вдоль блочной (колоночной, вертикальной) оси (в противоположность свойству «justify-items», которое определяет выравнивание вдоль строчной (горизонтальной) оси). Значение этого свойства применяется ко всем элементам контейнера.

.container

start — элементы сдвигаются в начало их ячеек (верхняя граница)
end — элементы сдвигаются в конеч ячеек (нижняя граница)
center — элементы располагаются по центру
stretch — элементы заполняют всю высоту ячеек

.container

.container

.container

.container

Расположение отдельного элемента вдоль колоночной оси ячейки контролируется свойством «align-self».

place-items

Данное свойство является сокращением для align-items и justify-items.

.container < place-items: ; >

— первое значение для align-items, второе — для justify-items. Если второе значение отсутствует, первое значение присваивается обоим свойствам.

.container

Элементы располагаются по центру ячеек вдоль колоночной оси и в начале вдоль строчной оси.

justify-content (выравнивание колонок)

Порой общая ширина элементов Сетки (ее колонок) оказывается меньше ширины контейнера. Это может произойти при определении элементов фиксированного размера (с помощью px, например). В этом случае мы можем определить порядок расположения колонок Сетки в контейнере. Данное свойство определяет выравнивание Сетки вдоль строчной оси — выравнивание колонок (в противоположность свойству «align-content», которое определяет выравнивание Сетки вдоль блочной (колоночной) оси — выравнивание строк).

.container

start — сдвигает Сетку в начало контейнера (левая граница)
end — сдвигает Сетку в конец контейнера (правая граница)
center — Сетка располагается по центру
stretch — колонки растягиваются таким образом, чтобы Сетка занимала всю ширину контейнера
space-around — одинаковое пространство между колонками, и половина такого пространства по краям контейнера
space-between — первая колонка сдвигается в начало контейнера, последняя — в конец, свободное пространство равномерно распределяется между остальными колонками
space-evenly — одинаковое пространство как между колонками, так и по краям контейнера

.container

.container

.container

.container

.container

.container

.container

align-content (выравнивание строк)

Порой общая высота элементов Сетки (ее строк) оказывается меньше высоты контейнера. Это может произойти при определении элементов фиксированного размера (с помощью px, например). В этом случае мы можем определить порядок расположения строк Сетки в контейнере. Данное свойство определяет выравнивание Сетки вдоль блочной (колоночной) оси — выравнивание строк (в противоположность свойству «justify-content», которое определяет выравнивание Сетки вдоль строчной оси — выравнивание колонок).

.container

start — сдвигает Сетку в начало контейнера (верхняя граница)
end — сдвигает Сетку в конец контейнера (нижняя граница)
center — Сетка располагается по центру
stretch — строки растягиваются таким образом, чтобы Сетка занимала всю высоту контейнера
space-around — одинаковое пространство между строками, и половина такого пространства по краям контейнера
space-between — первая строка сдвигается в начало контейнера, последняя — в конец, свободное пространство равномерно распределяется между остальными строками
space-evenly — одинаковое пространство как между строками, так и по краям контейнера

.container

.container

.container

.container

.container

.container

.container

place-content

Данное свойство является сокращением для align-content и justify-content.

.container < place-content: ; >

— первое значение для align-content, второе — для justify-content. Если второе значение отсутствует, первое значение присваивается обоим свойствам.

.container

Строки располагаются по центру контейнера, колонки — в начале.

grid-auto-columns, grid-auto-rows (размер неявных треков)

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

.container < grid-auto-columns: . ; grid-auto-rows: . ; >

— длина, проценты или фракции свободного пространства Сетки (используется единица измерения «fr»)

.container

Это создает Сетку размером 2х2.

Допустим, мы используем свойства «grid-column» и «grid-row» для позиционирования элементов следующим образом:

.item-a < grid-column: 1 / 2; grid-row: 2 / 3; >.item-b < grid-column: 5 / 6; grid-row: 2 / 3; >

Началом элемента с классом «item-b» является вертикальная линия 5, а концом — вертикальная линия 6, но мы не определили эти линии. Поскольку мы ссылаемся на несуществующие линии, для заполнения отступов создаются неявные треки с нулевой шириной. Мы можем использовать свойство «grid-auto-columns» для определения ширины неявных дорожек:

.container

grid-auto-flow

Для позиционирования элементов, находящихся за пределами Сетки, можно использовать алгоритм автоматического размещения (auto-placement algorithm). Рассматриваемое свойство определяет, как должен работать данный алгоритм.

.container

row (по умолчанию) — алгоритм заполняет текущую строку до предела и, при необходимости, когда ширины текущей строки оказалось недостаточно, создает новую строку
column — алгоритм заполняет текущую колонку до предела и, при необходимости, когда высоты текущей колонки оказалось недостаточно, создает новую колонку
dense — интеллектуальное заполнение Сетки при наличии элементов разного размера

Предположим, что у нас имеется такая разметка:

  item-a
 item-b
 item-c
 item-d
 item-e

Мы определяем Сетку, состоящую из пяти колонок и двух строк, и устанавливаем свойству «grid-auto-flow» значение «row» (которое является значением по умолчанию):

.container

При размещении элементов в Сетке, мы определяем места только двух элементов:

.item-a < grid-column: 1; grid-row: 1 / 3; >.item-e < grid-column: 5; grid-row: 1 / 3; >

Поскольку значением свойства «grid-auto-flow» является «row», наша Сетка выглядит так, как показано на изображении ниже. Обратите внимание на расположение элементов с классами «item-b», «item-c» и «item-d» (предпочтение отдается строкам):

Если поменять значение свойства «grid-auto-flow» на «column», Сетка будет выглядеть следующим образом (предпочтение отдается колонкам):

grid

Данное свойство является сокращением для grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow (обратите внимание, что в одном объявлении могут содержаться только «явные» или «неявные» свойства).

none — все свойства принимают значения по умолчанию
— аналогично сокращению grid-template
/ [auto-flow && dense?] ? — определяет значение для grid-template-rows. Если справа от слэша имеется ключевое слово «auto-flow», значением свойства «grid-auto-flow» становится «column». Если в дополнение к auto-flow указано ключевое слово «dense», алгоритм автоматического размещения упаковывает элементы соответствующим образом. Если значение для свойства «grid-auto-columns» опущено, его значением становится «auto»
[auto-flow && dense?] ? / — определяет значение для grid-template-columns. Если слева от слэша имеется ключевое слово «auto-flow», значением свойства «grid-auto-flow» становится «row». Если в дополнение к auto-flow указано ключевое слово «dense», алгоритм автоматического размещения упаковывает элементы соответствующим образом. Если значение для свойства «grid-auto-rows» опущено, его значением становится «auto»

.container < grid: 100px 300px / 3fr 1fr; >

.container

Следующие два блока кода эквиваленты:

.container < grid: auto-flow / 200px 1fr; >

.container

Следующие два блока кода эквиваленты:

.container < grid: auto-flow dense 100px / 1fr 2fr; >

.container

И следующие два блока кода также эквиваленты:

.container < grid: 100px 300px / auto-flow 200px; >

.container

В данном случае мы можем использовать более сложный, но в тоже время более удобный синтаксис для одновременного определения свойств «grid-template-areas», «grid-template-rows» и «grid-template-columns» и установки прочих свойств в дефолтные значения. Что для этого нужно сделать, так это определить названия линий и размеры треков с соответствующими областями на одной строке. Это проще продемонстрировать на примере:

.container < grid: [row1-start] "header header header" 1fr [row1-end] [row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto; >

Это равнозначно следующему:

.container

Свойства грид-элементов

Обратите внимание, что свойства float, display: inline-block, display: table-cell, vertical-align и column-*, применяемые к грид-элементу, не имеют никакого эффекта.

grid-column-start, grid-column-end, grid-row-start, grid-row-end

Данные свойства определяют положение элемента в Сетке через привязку к определенным линиям. grid-column-start / grid-row-start — это начальные линии элемента, а grid-column-end / grid-row-end — конечные.

.item < grid-column-start: | | span | span | auto; grid-column-end: | | span | span | auto; grid-row-start: | | span | span | auto; grid-row-end: | | span | span | auto; >

— может быть числом (привязка осуществляется к номеру линии) или названием (привязка осществляется к названию линии)
span — элемент будет растянут на указанное количество треков
span — элемент будет растягиваться до достижения линии с указанным названием
auto — автоматическое расположение, автоматическое расширение или дефолтное растягивание на одну колонку

.item-a

.item-b

Если значения свойств grid-column-end / grid-row-end не определены, элемент займет 1 трек по умолчанию.

Элементы могут перекрывать друг друга. Вы можете использовать свойство z-index для управления порядком наложения элементов.

grid-column, grid-row

Данные свойства являются сокращением для grid-column-start + grid-column-end и grid-row-start + grid-row-end, соответственно.

.item < grid-column: / | / span ; grid-row: / | / span ; >

/ — значения аналогичны значениям оригинальных свойств, включая span

.item-c < grid-column: 3 / span 2; grid-row: third-line / 4; >

Если конечная линия не определена, элемент по умолчанию будет занимать 1 трек.

grid-area

Данное свойство определяет название элемента, которое используется в качестве значения в свойстве grid-template-areas. grid-area также может использоваться как сокращение для grid-row-start + grid-column-start + grid-row-end + grid-column-end.

.item < grid-area: | / / / ; >

— произвольное название элемента
/ / / — могут быть числами или названиями линий

.item-d

Сокращение для grid-row-start + grid-column-start + grid-row-end + grid-column-end:

.item-d < grid-area: 1 / col4-start / last-line / 6; >

justify-self

Данное свойство определяет выравнивание элемента в ячейке вдоль строчной оси (в противоположность свойству align-self, которое определяет выравнивание вдоль блочной (колоночной) оси). Это свойство применяется к элементу внутри отдельной ячейки.

.item

start — элемент сдвигается в начало ячейки (левая граница)
end — элемент сдвигается в конец ячейки (правая граница)
center — элемент располагается по центру
stretch — элемент заполняет всю ширину ячейки

.item-a

.item-a

.item-a

.item-a

Для управления выравниванием всех элементов Сетки вдоль строчной оси используется свойство justify-items.

align-self

Данное свойство определяет выравнивание элемента в ячейке вдоль блочной (колоночной) оси (в противоположность свойству justify-self, которое определяет выравнивание вдоль строчной оси). Это свойство применяется к элементу внутри отдельной ячейки.

.item

start — элемент сдвигается в начало ячейки (верхняя граница)
end — элемент сдвигается в конец ячейки (нижняя граница)
center — элемент располагается по центру
stretch — элемент заполняет всю высоту ячейки

.item-a

.item-a

.item-a

.item-a

Для управления выравниванием всех элементов Сетки вдоль блочной (колоночной) оси используется свойство align-items.

place-self

Данное свойство является сокращением для align-self и justify-self.

auto — значение по умолчанию
/ — первое значение для align-self, второе — для justify-self. Если второе значение опущено, первое значение применяется к обоим свойствам

.item-a

.item-a

Специальные функции и ключевые слова

При определении размеров строк и колонок можно использовать не только обычные единицы измерения, такие как px, rem, % и т.д., но и такие ключевые слова, как min-content, max-content, auto и, пожалуй, самое полезное — фракции (fr). grid-template-columns: 200px 1fr 2fr min-content
Вы также можете использовать функции, которые делают элементы масштабируемыми. Например, так можно определить элемент, шириной в 1fr, способный сжиматься до 200px: grid-template-columns: 1fr minmax(200px, 1fr)
Функция repeat() используется для быстрого определения повторяющихся элементов: grid-template-columns: repeat(10, 1fr) (десять колонок, шириной в 1fr)
Сочетание названных возможностей позволяет добиться невероятной гибкости макета, например: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) (из примера в начале раздела про Грид)

Полезные ресурсы

Поддержка

Туториал

В данном туториале мы создадим простой тренажер по основным свойствам Flexbox.

Разметка

     
 Flex Container Props flex-direction  flex-wrap  justify-content  align-items  align-content  
 Flex Item Props order flex-grow flex-shrink align-self  
 
 1
 2
 3
 4
 5
 6

Здесь у нас имеется флекс-контейнер (flexContainer) с шестью флекс-элементами (flex-item) и контейнер (controls) для управления переключением свойств флекс-контейнера (flexContainerProps) и выбранного (selected) флекс-элемента (flexItemProps). Также во втором контейнере у есть две кнопки (buttons): одна для добавление элемента во флекс-контейнер (addBtn), другая для удаления последнего флекс-элемента (removeBtn).

Стили

main < display: flex; justify-content: center; align-items: center; >#controls < margin-right: 0.4rem; >#buttons < margin: 0.4rem; display: flex; flex-wrap: wrap; justify-content: center; >button < margin: 0.2rem; >label < display: block; margin: 0.4rem; >select < width: 100%; >#flexContainer < width: 600px; height: 600px; border: 1px dashed #222; border-radius: 4px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; >.flex-item < min-width: 178px; min-height: 178px; background: radial-gradient(circle, yellow, orange); border: 1px solid #222; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); color: #222; font-size: 2rem; display: flex; justify-content: center; align-items: center; user-select: none; cursor: pointer; >.flex-item:nth-child(2n) < min-width: 158px; min-height: 158px; >.flex-item:nth-child(3n) < min-width: 198px; min-height: 198px; >.flex-item.selected

Флекс-элементы должны быть разного размера и при этом гибкими. Мы добиваемся этого с помощью min-width/min-height и nth-child. Выбранный элемент имеет класс «selected» с другим цветом фона.

Скрипт

// Получаем контейнеры и кнопки const controls = document.querySelector('#controls') const buttons = document.querySelector('#buttons') const flexContainer = document.querySelector('#flexContainer') // Обрабатываем нажатие кнопки buttons.addEventListener('click', (e) => < // Нас интересует только нажатие кнопки if (e.target.tagName !== 'BUTTON') return // Получаем название кнопки const < btn >= e.target.dataset switch (btn) < // Если нажата кнопка для добавления элемента во флекс-контейнер case 'addBtn': // Максимальное количество элементов составляет 6 единиц // При большем количестве произойдет переполнение флекс-контейнера // Определяем порядковый номер элемента const num = document.querySelectorAll('.flex-item').length + 1 // Проверяем, что в контейнере находится меньше 7 элементов // Если это так if (num < 7) < // Создаем новый элемент "div" const newItem = document.createElement('div') // Добавляем ему соответствующий класс newItem.className = 'flex-item' // Нумеруем его newItem.textContent = num // И помещаем во флекс-контейнер flexContainer.append(newItem) >break // Если нажата кнопка для удаления флекс-элемента case 'removeBtn': // Определяем индекс последнего элемента const index = document.querySelectorAll('.flex-item').length - 1 // Проверяем, что индекс последнего элемента больше 0 // Мы не хотим удалять единственный флекс-элемент if (index > 0) < // Определяем элемент, подлежащий удалению const itemToRemove = document.querySelectorAll('.flex-item')[index] // И удаляем его itemToRemove.remove() >break > >) // Обрабатываем изменения селектов и инпутов controls.addEventListener('change', (e) => < // Получаем название измененного свойства const prop = e.target.id // Получаем значение измененного свойства const value = e.target.value // Проверяем, какое свойство изменилось // Свойство флекс-контейнера или свойство выбранного флекс-элемента // И добавляем соответствующие свойства и значения if (e.target.parentElement.id === 'flexContainerProps') < flexContainer.style[prop] = value >else < const selectedItem = document.querySelector('.selected') selectedItem.style[prop] = value >>) // Обрабатываем выбор флекс-элемента flexContainer.addEventListener('click', (e) => < // Нас интересует только клик по не выбранному флекс-элементу if ( e.target.className !== 'flex-item' || e.target.classList.contains('selected') ) return // Нам нужно удалить класс "selected" у текущего выбранного элемента if (document.querySelector('.selected') !== null) document.querySelector('.selected').classList.remove('selected') // И добавить его новому выбранному элементу e.target.classList.add('selected') // При выборе флекс-элемента нам необходимо получить значения его "флекс-свойств" // И присвоить их соответствующим инпутам и селекту // Это позволяет изменять свойства выбранного флекс-элемента // Переключаться на другой элемент // Возвращаться к первому, и редактировать ранее измененные свойства // Вспомогательная функция для получения значения определенного свойства указанного элемента // Значением по умолчанию второго параметра функции является выбранный флекс-элемент const getStyle = (property, element = e.target) =>getComputedStyle(element).getPropertyValue(property) // Воспользуемся тем, что мы можем обращаться к DOM-элементам, имеющим атрибут "id", напрямую // Обратите внимание, что делать так не рекомендуется order.value = getStyle('order') flexGrow.value = getStyle('flex-grow') flexShrink.value = getStyle('flex-shrink') alignSelf.value = getStyle('align-self') >)

Как видите, ничего сложного. Конечно, функционал получившегося тренажера весьма ограничен. Однако, полагаю, этого вполне достаточно для понимания работы основных свойств Flexbox.

Рекомендую попробовать создать аналогичный тренажер по основным свойствам Grid — это будет отличной практикой и позволит как следует во всем разобраться.

Вам также может показаться интересным один из моих последних проектов — Современный стартовый HTML-шаблон.

Благодарю за внимание и хорошего дня.

Вёрстка на Grid в CSS. Полное руководство и справочник

Эта статья показывает как работает эта сравнительно новая технология, именно работает, а не имеет только описание свойств с поверхностными примерами.

Сама статья является адаптивным дополненным переводом CSS Grid Tutorial

Вёрстка на Grid в CSS. Полное руководство и справочник

Grid модуль для CSS был разработан рабочей группой CSS для того, чтобы сделать создание шаблонов в CSS максимально удобным. Он попал в рекомендации по официальному внедрению в феврале 2017 года, а основные бразуеры начали его поддержку уже в марте 2017 года.

CSS Grid скоро станет неотъемлемой частью набора инструментов любого фронт-энд разработчика. И если вы один из них, то вам придется учить CSS Grid — который уже точно станет неоспоримым умением для любой позиции в фронтэнд разработке.

С этим мощным функционалом и интуитивно понятным синтаксисом, шаблоны на grid несомненно будут менять представление о создании веба как такового.

Введение

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

С развитием веба, в последние годы, разработка шаблонов веб-сайтов стала всё более затруднительной. В ранние годы веба, HTML таблицы зачастую использовались для многоколоночных шаблонов, форм и т.д. Но у этого метода есть свои недостатки. Это означает то, что представление шаблона, как такового должно было быть сделано на уровне разметки, таким образом стирая различие между представлением и контентом. По факту, таблицы были созданы для того, чтобы содержать табличные данные и только для этого. И уже даже не касаясь семантических проблем, табличные шаблоны совершенно не созданы для адаптивного дизайна.

Флоаты в конечном итоге заменили таблицы как всеобще приемлемый и рекомендованный метод создания разметки шаблона, так как он позволяет нам позиционировать элементы вне зависимости от изначальной разметки. Тем не менее, пока этот метод считался значительным улучшением на фоне табличной верстки, у него тоже были свои ограничения. Флоаты в основном были разработаны для создания шаблонов документов и они не совсем были подходящими для создания сложных шаблонов приложений, которые сейчас распространены в сети и которые мы привыкли видеть в своих браузерах. Флоат элементы сложно контролировать, особенно на девайсах и viewport’ах разных размеров. Это привело к различным гридободобным хакам, которые уже стали нормой, большинству из них требовалась дополнительная разметка, которая отвлекала от общей концепции разделения контента. Таким образом рабочая группа CSS находилась в поиске наилучшего решения для всех задач.

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

Хотя flexbox уже позволил разработчикам начать уходить от флоат элементов, но он работает только в одном измерении. Grid CSS же это делает в двух, таким образом лучше подходя для создания сложных, комплексных шаблонов.

Как это работает?

Grid шаблон работает по системе сеток. Grid это набор пересекающихся горизонтальных и вертикальных линий, которые создают размерность и позиционируют систему координат для контента в самом grid -контейнере.

Чтобы создать Grid разметку, вам просто нужно выставить элементу display: grid . Этот шаг автоматически сделает всех прямых потомков этого элемента — grid элементами. После этого вы можете смело использовать разнообразные grid свойства для выравнивания размеров и позиционирования элементов должным образом. Обычно первым шагом является определение того, сколько колонок и рядов есть в гриде. Но даже это опциональный момент — как вы увидите далее.

Это пример грида с четырьмя рядами и тремя колонками. Он состоит из 12 grid элементов. Каждый из этих элементов отмечен зеленым и между ними есть небольшое расстояние.

Все эти grid элементы одного размера, но они могли бы быть совершенно любого размера, такого, какого мы захотим. Мы могли бы сделать их совершенно разными по размерам, если бы захотели. Некоторые из них могли бы охватывать несколько столбцов и рядов, другие могли бы оставаться размеров с одну ячейку. Далее в этой статье вы узнаете об этих и других функциях в grid, некоторые из которых вполне смогут вас удивить.

Создаем Grid

Вот пример простого 3×3 грида с небольшими отступами между элементами.

Давайте внимательнее вглядимся в код. HTML разметка для CSS Grid выглядит вот так:

Таким образом мы видим обычный HTML, состоящий из элементов, вложенных в свой внешний элемент. Но именно для наших целей, внешний это контейнер гридов. Соотвественно, все элементы вложенные в него будут являться грид элементами.

Но по факту, это не будет полноценными гридом, пока мы не применим кое-какой CSS для него. Вот код, который создаёт его:

#grid < 
display: grid; 
grid-template-rows: 1fr 1fr 1fr; 
grid-template-columns: 1fr 1fr 1fr; 
grid-gap: 2vw;
>

Это правило применяется к внешнему , так как ему было назначено ID #grid .

Вот объяснение того, что написано в этом CSS:

Превращает элемент в grid контейнер. Это все, что нужно для того, что создать грид. Теперь у нас есть грид-контейнер и грид-элементы. Значения гридов создают блочный контейнер. Вы так же можете использовать display: inline-grid , что создать строчный грид-контейнер. Или же вы можете использовать display: subgrid , чтобы создать подсетку, это значение используется на самих grid элементах.

grid-template-rows: 1fr 1fr 1fr

Выстраивает ряды в гриде. Каждое значение представляет размер ряда. В этом случае все значения равны 1fr. Очень подробно и понятно про (fr) можно почитать тут.

Но конечно же, для этого можно было бы использовать разные значения, такие как 100px , 7em , 30% и так далее. Вы также можете назначать имена строкам вместе с их размерами.

grid-template-columns: 1fr 1fr 1fr

Тоже самое, что и выше, только определяет колонки в гридах.

Выставляет разрыв. То есть пробелы между грид элементами. Тут мы используем vw единицу, которая относительна ширине viewport, но также мы можем использовать 10px , 1em и т. д. Grid-gap свойство это сокращение для grid-row-gap и grid-column-gap свойств.

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

#grid > div font-size: 5vw; 
padding: .5em; 
background: gold; 
text-align: center;
>

Функция repeat()

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

grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

Мы можем сделать так:

grid-template-rows: repeat(5, 1fr);

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

Создаем шаблон сайта с CSS Grid

Гриды включают в себя интуитивный «ASCII-графический» синтаксис, в котором вы можете виртуально «видеть» шаблон в коде, поэтому становится очень легко создавать и изменять сам шаблон. Даже значительные изменения могут быть сделаны за несколько секунд. Этот интуитивный синтаксис также помогает с адаптивным веб-дизайном. Создание разных шаблонов для разных устройств становится довольно пустяковым делом при использовании грид разметки.

Давайте теперь создадим шаблон сайта, который выглядит таким образом:

А вот код этого шаблона:


Example

 
Давайте ближе посмотрим на наш код. HTML разметка выглядит таким образом:

 
Итак, мы сделаем грид-контейнером, таким образом все другие элементы станут грид-элементами.

А теперь давайте посмотрим на ASCII-графику, о которой мы говорили прежде.

grid-template-areas: 
"header header header" 
"nav article ads" 
"footer footer footer";

Подробнее про grid-template-areas вы можете прочитать в статье Поразительный CSS Grid Area

Этот кусок определяет наш шаблон. Просто смотря на код, мы можем видеть, что это 3х3 грид (три ряда и три колонки). Таким образом у нас получается пять грид областей на девяти грид ячейках, так как некоторые наши грид-области занимают несколько ячеек.

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

Теперь мы можем назначить каждую из этих грид-областей каждому элементу:

#pageHeader grid-area: header;
>
#pageFooter grid-area: footer;
>
#mainArticle < 
grid-area: article; 
>
#mainNav < 
grid-area: nav; 
>
#siteAds < 
grid-area: ads; 
>

Свойство grid-area это сокращение свойства, которое позволяет вам размещать грид-элементы в гриде. В нашем случае, мы просто отсылаемся к названиям, которые мы уже предварительно указали в grid-template-areas .

Большая часть шаблона уже завершена. Остаток кода просто будет относиться к размерам, пробелам и высотам, в общем скорее к декоративной области.

Следующий код выдает размеры строкам и колонкам:

grid-template-rows: 60px 1fr 60px;grid-template-columns: 20% 1fr 15%;

Первая и третья строки — обе в 60px высотой, а вторая строка забирает все оставшееся место.

Первый столбец равен 20% , а третий 15% . Второй же забирает все оставшееся место.

Изменяем шаблон

Вы можете изменить шаблон просто перераспределив грид-области в grid-template-areas .

Таким образом, если мы сменим на это:

grid-template-areas: 
"nav header header" 
"nav article ads" 
"nav footer ads";

То в результате получим такой шаблон:

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

Для примера, чтобы сделать так:

Навигация теперь занимает место где был контент, следовательно, размеры были отрегулированы. В противном случае у нас был бы узкий контент и широкая навигация. Таким образом, код сейчас выглядит таким образом.

grid-template-areas: 
"header header header" 
"article nav ads" /* До этого было "nav article ads" */ 
"footer footer footer";
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 1fr 20% 15%; /* До этого было'20% 1fr 15%' */

Создаем адаптивный Grid

В шаблоне созданном на гридах есть такие значения, как auto-fill и auto-fit , которые позволяют вам создавать грид с множеством треков определенного размера, которые будут помещаться в указанном контейнере. Это говорит о том, что грид является адаптивным, то есть в нем элементы меняют свои позиции с тем, как вы меняете размер окна браузера.

Пример использования Auto-fill :

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

Код отвечающий именно за это:

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

В нем колонкам выдается минимальный размер в 150px и максимум по оставшемуся месту. Такие треки будут повторяться столько раз, сколько нужно для того, чтобы уложиться в заданный контейнер.

Repeat() функция повторяет определение трека количество раз, заданное первым параметром. Использование auto-fill заставит треки повторяться такое количество раз, пока они не заполнят контейнер.

Размер этих треков указан во втором параметре. В нашем случае, мы используем minmax(150px, 1fr) , чтобы указать то, что минимальный размер столбца равен 150px , а максимальный 1fr .

Пример с Auto-fit

auto-fit работает практически также, как и auto-fill . Разница тут только в том, что auto-fit стягивает все пустые треки в конце размещения, в то время как auto-fill нет. Лучший способ тут, это демонстрация со сравнением.


Example

 
1
 
2


 
1
 
2

Использование двух маленьких грид элементов тут поможет показать всю концепцию работы. Auto-fill оставляет пустые треки в конце по указанным размерам, а auto-fit растягивает пустой трек, что ведёт к заполнению треков растянутыми элементами для заполнения пространства.

Гриды с медиа запросами

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

Это делает CSS Grid идеальным для медиа запросов. Мы можем просто переназначить значения в ASCII-графике и обернуть результат в конечный медиа запрос.


Example

 
Вот результат

Это трехколоночный шаблон на большом viewport и он сжимается в одноколоночный на маленьких устройствах. Таким образом, этот пример будет выглядеть уже по-другому в зависимости от размера экрана. В любом случае, вот релевантный код для трехколоночного шаблона, для широких вьюпоротов.

grid-template-areas: 
"header header header" 
"nav article ads" 
"footer footer footer";

А вот соответствующий код для мобильной версии:

grid-template-areas: 
"header" 
"article" 
"ads" 
"nav" 
"footer";

Таким образом, все дело состоит в переназначении значений в свойстве grid-template-areas .

В нашем случае мы обернули мобильную версию в медиа запрос, как тут:

@media all and (max-width: 575px) body < 
grid-template-areas: 
"header" 
"article" 
"ads" 
"nav" 
"footer"; 
grid-template-rows: 80px 1fr 70px 1fr 70px; 
grid-template-columns: 1fr; 
>
>

Обратите внимание, что мы также подкорректировали значения в grid-template-rows и в grid-template-columns , чтобы они подходили под новый шаблон. В частности, тут должна быть только одна колонка и она должна занимать все свободное место. А так как все грид элементы будут в одну кучу, мы назначим 5 строк и определим их высоты.

Совмещаем grid c block

В зависимости от требований к вашему шаблону, нет ничего, что остановит вас изменить мобильную версию на display: block . Как тут:

@media all and (max-width: 575px) body < 
display: block; 
>
>

Это будет работать также как и в примере выше, но по-дефолту, элементы встанут по своему исходному порядку. В примере выше, мобильная версия имеет nav под ads , но если бы мы использовали display: block , то nav был бы выше ads .

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

Явные и неявные гриды

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

Явный грид — это грид, который вы определяете в grid-template-rows , grid-template-colums и в grid-template-areas .

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

Неявные гриды автоматически генерируются самим грид-контейнером всякий раз когда грид-элементы располагаются за пределами явного грида. Контейнер генерирует неявные грид треки, добавляя неявные строки в грид. Эти строки вместе с явными гридами и формируют как таковые неявные. Вот пример:


Example
1
 
2
 
3
 
4
 
5
 
6

Flexboxgrid2 как использовать

Какую сетку использовать?

Адаптивное меню на CSS flexbox

Работаем над адаптивностью шапки

Комментарии ( 2 ):

Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал

Flexbox (Flex, далее по тексту — Флекс)

Терминология

Свойства флекс-контейнера

display

flex-direction (направление)

flex-wrap (перенос, переход, разделение)

flex-flow (поток)

justify-content (выравнивание контента в одной строке)

align-items (выравнивание элементов)

align-content (выравнивание содержимого в нескольких строках)

Свойства флекс-элементов

order (порядок)

flex-grow (рост, расширение)

flex-shrink (сжатие, сокращение)

flex-basis

flex

align-self(выравнивание отдельного элемента)

Примеры

Полезные ресурсы

Поддержка

Grid (далее по тексту — Грид или Сетка)

Терминология

Грид-контейнер (Grid Container, далее по тексту — контейнер)

Грид-линия (Grid Line, далее по тексту — линия)

Грид-трек (Grid Track, далее по тексту — трек или дорожка)

Грид-область (Grid Area, далее по тексту — область)

Грид-элемент (Grid Element, далее по тексту — элемент)

Грид-ячейка (Grid Cell, далее по тексту — ячейка)

Пример

Свойства грид-контейнера

display

grid-template-columns, grid-template-rows

grid-template-areas

grid-template

column-gap, row-gap, grid-column-gap, grid-row-gap

gap, grid-gap

justify-items

align-items

place-items

justify-content (выравнивание колонок)

align-content (выравнивание строк)

place-content

grid-auto-columns, grid-auto-rows (размер неявных треков)

grid-auto-flow

grid

Свойства грид-элементов

grid-column-start, grid-column-end, grid-row-start, grid-row-end

grid-column, grid-row

grid-area

justify-self

align-self

place-self

Специальные функции и ключевые слова

Полезные ресурсы

Поддержка

Туториал

Разметка

Стили

Скрипт

Вёрстка на Grid в CSS. Полное руководство и справочник

Вёрстка на Grid в CSS. Полное руководство и справочник

Введение

Как это работает?

Создаем Grid

Создаем шаблон сайта с CSS Grid

Изменяем шаблон

Создаем адаптивный Grid

Гриды с медиа запросами

Совмещаем grid c block

Явные и неявные гриды

Выставляем размер трека для неявных гридов

Auto-flow — строки или колонки

Опциональное значение dense

Расстановка Grid-элементов