Abr@X@bra.ru
CSS Grid, подробное руководство по гридам с примерами
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

25.05.2017
1750

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

Контейнер сетки

Создайте контейнер сетки, установив свойство отображения со значением grid или inline-grid. Все прямые дочерние элементы grid-контейнеров становятся элементами сетки.

display: grid;

Элементы сетки по умолчанию размещаются в строках и охватывают всю ширину контейнера сетки.


display: inline-grid;


Явная сетка

Явно задайте сетку, создав столбцы и строки с помощью свойств grid-template-columns и grid-template-rows.

grid-template-rows: 50px 100px;

Строки создается для каждого значения, указанного для строк сетки-шаблона. Значения размера колонки могут быть любыми неотрицательными значениями длины (px,%, em и т. д.).

Позиции 1 и 2 имеют фиксированные высоты 50px и 100px.

Поскольку были определены только 2 строки, высота элементов 3 и 4 определяется автоматом.


grid-template-columns: 90px 50px 120px;

Подобно строкам, столбцы отслеживаются для каждого значения, указанного для grid-template-columns.

Пункты 4, 5 и 6 были помещены на новую строку, потому что было определено только 3 размера колонок; И поскольку они были размещены в столбцах 1, 2 и 3, их размеры столбцов равны элементам 1, 2 и 3.

Элементы сетки 1, 2 и 3 имеют фиксированную ширину 90px, 50px и 120px соответственно.


Grid-template-columns: 1fr 1fr 2fr

Модуль fr позволяет создавать гибкие сетки. Он представляет собой часть доступного пространства в контейнере сетки (работает, как безликие значения Flexbox).

В этом примере пункты 1 и 2 занимают первые два (из четырех) разделов, а элемент 3 - последние два.


Grid-template-columns: 3rem 25% 1fr 2fr

Fr вычисляется на основе оставшегося пространства в сочетании с другими значениями длины.

В этом примере 3rem и 25% будут вычитаться из доступного пространства до того, как будет вычислен размер fr:

1fr = ((ширина сетки) - (3rem) - (25% ширины сетки)) / 3


Минимальный и максимальный размер сетки

Размер сетки может быть определен как минимальный и / или максимальный размер с помощью функции minmax ().

Grid-template-rows: minmax (100px, auto);

Grid-template-columns: minmax (auto, 50%) 1fr 3em;

Функция minmax () принимает два аргумента: первый - это минимальный размер дорожки, а второй - максимальный размер. Наряду с значениями длины значения могут также быть авто, что позволяет треку расти / растягиваться в зависимости от размера содержимого.

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

Первый столбец имеет минимальный размер авто, но его максимальный размер 50% не позволит получить ширину контейнера сетки не более чем на 50%.


Повторяющиеся колонки сетки

Определить повторяющиеся колонки сетки с помощью нотации repeat (). Это полезно для сеток с элементами одинакового размера или с множеством элементов.

Grid-template-rows: repeat (4, 100px);

Grid-template-columns: repeat (3, 1fr);

Нотация repeat () принимает два аргумента: первый представляет количество повторений определенных треков, а второе - определение колонки.


Grid-template-columns: 30px repeat (3, 1fr) 30px

Repeat () также можно использовать в списках.

В этом примере первый и последний столбцы имеют ширину 30 пикселей, а три столбца между ними, созданные с помощью функции repeat (), имеют ширину по 1 fr.


Разрывы в сетке

Свойства grid-column-gap и grid-row-gap создают перемычки между столбцами и строками.

Разрывы в сетке создаются только между столбцами и строками, а не вдоль края контейнера сетки.

Grid-row-gap: 20px;

Grid-column-gap: 5rem;

Значения размера разрыва могут быть любыми неотрицательными значениями длины (px,%, em и т. д.).


Grid-gap: 100px 1em
Grid-gap - это сокращение для grid-row-gap и grid-column-gap.

Если заданы два значения, первый представляет собой разрыв между строками и второй сетки-столбец-разрыв (grid-column-gap).


Grid-gap: 2rem

Одно значение устанавливает равные разрывы строк и столбцов.


Позиционирование позиций по номерам линий сетки

Линии сетки представляют собой строки, которые представляют начало, конец.

Каждая строка, начинающаяся с начала колонки.

Grid-row-start: 2;

Grid-row-end: 3;

Grid-column-start: 2;

Grid-column-end: 3;

Эта 2-столбчатая трехрядная сетка дает 3 строки столбцов и 4 линии сетки. Позиция 1 была перемещена по номерам строки и столбца.

Если элемент охватывает только одну строку или столбец, нет необходимости в grid-row / column-end.


Grid-row: 2;

Grid-column: 3/4;

Grid-row - это сокращение для grid-row-start и grid-row-end.

Grid-column является сокращением для grid-column-start и grid-column-end.

Если указано одно значение, оно указывает начало grid-row / column-start.

Если задано два значения, первое значение соответствует началу строки сетки / столбца и второй строке решетки / столбцы должны быть разделены косой чертой /.


Grid-area: 2/2/3/3

Grid-area - это сокращение для grid-row-start, grid-column-start, grid-row-end и grid-column-end.

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


Связующие элементы по строкам и столбцам

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

Grid-column-start: 1;

Grid-column-end: 4;

Установите элемент сетки, чтобы охватить несколько колонок, установив grid-column-end на номер строки столбца, который находится на расстоянии более одного столбца от grid-column-start.


Grid-row-start: 1;

Grid-row-end: 4;

Элементы сетки могут также охватывать несколько строк в ряд, устанавливая grid-row-end.


Grid-row: 2/5;

Grid-column: 2/4;

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


Grid-row: 2 / span 3;

Grid-column: span 2;

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


Наименование линий сетки

Линии сетки могут быть названы при определении сетки с помощью свойств grid-template-rows и grid-template-columns.

Grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];

Grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];

Присваивать имена линиям сетки при определении сетки с помощью свойств grid-template-rows и grid-template-columns.

В названиях строк избегайте появления ключевых слов в спецификации, чтобы не вызывать путаницы.

Назначенные имена строк должны быть заключены в квадратные скобки [name-of-line] и помещены относительно треков сетки.


Grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end];

Grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];

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

На каждое имя линии можно ссылаться при позиционировании элементов сетки по именам строк.


Позиционирование позиций по строкам

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

Grid-row-start: row-2-start;

Grid-row-end: row-end;

Grid-column-start: col-2-start;

Grid-column-end: col-end;

Названия строк ссылки не должны быть заключены в квадратные скобки.


Grid-row: row-2-start / row-end;

Grid-column: col-2-start / col-end;

Параметры grid-row и grid-column shorthand также поддерживают использование имен линий сетки при позиционировании элементов.


Именование и размещение элементов по линиям сетки с одинаковым именем

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

Grid-template-rows: repeat (3, [row-start] 1fr [row-end]);

Grid-template-columns: repeat (3, [col-start] 1fr [col-end]);

Назначение имен строк также может быть включено в функцию repeat (). В результате получается несколько линий сетки с одинаковыми именами.

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


Grid-row: row-start 2 / row-end 3;

Grid-column: col-start / col-start 3;

Чтобы позиционировать элементы по строкам с одинаковым именем, укажите имя строки и номер места возникновения / имени: имя и номер должны быть разделены пробелом.

В этом примере позиция 1 начинается с 2-й линии сетки с именем row-start и заканчивается на 3-й линии сетки с именем row-end; И его позиция в столбце начинается с 1-й линии сетки с именем col-start и заканчивается на 3-й линии сетки с именем col-start.


Именование и размещение элементов по сетке

Как имена линий сетки, области сетки, также могут быть названы с помощью свойства grid-template-areas. Имена могут затем ссылаться на позиции сетки.

grid-template-areas:   "header header"

                       "content sidebar"

                       "footer footer";

grid-template-rows:    150px 1fr 100px;

grid-template-columns: 1fr 200px;

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

Каждый набор имен определяет строку, и каждое имя определяет столбец.


Grid-row-start: header;

Grid-row-end: header;

Grid-column-start: header;

Grid-column-end: header;

Названия областей сетки могут ссылаться на те же свойства, что и позиционные элементы сетки: grid-row-start, grid-row-end, grid-column-start и grid-column-end.


grid-row:    footer;

grid-column: footer;  

Скрытые свойства grid-row и grid-column также могут ссылаться на имена областей сетки.


grid-area: sidebar;

Сокращенное свойство сетки может также использоваться для ссылки на имена областей сетки.


Неявная сетка

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

Неявная сетка может быть определена с использованием свойств grid-auto-rows, grid-auto-columns и grid-auto-flow.

Grid-template-rows: 70px;

Grid-template-columns: repeat (2, 1fr);

Grid-auto-rows: 140px;

В этом примере мы определили только одну строку, поэтому элементы сетки 1 и 2 имеют высоту 70 пикселей.

Трек второй строки был автоматически создан, чтобы освободить место для элементов 3 и 4. В grid-auto-rows определяются размеры дорожки строки в неявной сетке, что отражается высотой 140px элементов 3 и 4.


grid-auto-flow: row

Поток (направление) по умолчанию - строка.


grid-auto-flow: column

Поток сетки можно изменить на столбец.


grid-template-columns: 30px 60px;

grid-auto-flow: column;

grid-auto-columns: 1fr;

В этом примере мы определили только размеры первых двух столбцов столбца: элемент 1 имеет ширину 30 пикселей и элемент 2, 60 пикселей.

Треки столбцов автоматически создаются в неявной сетке, чтобы освободить место для элементов 3, 4 и 5; И размеры дорожек определяются с помощью grid-auto-columns.


Неявно назначенные области сетки

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

grid-template-rows:    [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];

grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [inner-end];

В этом примере строки и столбцы имеют строки внутреннего и внутреннего конца, которые неявно присваивают имя области сетки.

grid-area: inner

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


Неявные именованные линии сетки

Неявно названные линии сетки работают в обратном направлении к неявно именуемым областям - области сетки именования неявно присваивают имена линиям сетки.

grid-template-areas:   "header header"

                       "content sidebar"

                       "footer footer";

grid-template-rows:    80px 1fr 40px;

grid-template-columns: 1fr 200px;

Именованные области сетки будут неявно называть линии сетки вдоль краев области. Эти линии сетки будут называться по имени области и будут добавлены с -start или -end.


grid-row-start:    header-start;

grid-row-end:      content-start;

grid-column-start: footer-start;

grid-column-end:   sidebar-end;

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


Элементы сетки - слои

Элементы сетки можно сложить / сгруппировать, правильно расположив их и присвоив z-index, когда это необходимо.

В этом примере позиции 1 и 2 позиционируются для начала строки строки 1 и имеют ширину 2 столбца.

.item-1,

.item-2 {

 grid-row-start:  1;

 grid-column-end: span 2;

}

.item-1 { grid-column-start: 1; z-index: 1; }

.item-2 { grid-column-start: 2 }

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

По умолчанию элемент 2 будет располагаться поверх элемента 1; Однако мы создали контекст стека, назначив z-index: 1 для элемента 1, в результате чего он будет находиться над элементом 2.


grid-row-start:    header-start;

grid-row-end:      content-end;

grid-column-start: content-start;

grid-column-end:   sidebar-start;

z-index: 1;

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


Выравнивание элементов сетки (выравнивание по ширине)

Модуль выравнивания по ширине CSS дополняет CSS Grid, позволяя выравнивать элементы вдоль строки оси столбца.

justify-items и justify-self элементы вдоль оси строки, а justify-items и align-items элементы вдоль оси столбца.

Justify-items и align-items применяются к контейнеру grid и поддерживают следующие значения:

  • auto

  • normal

  • start

  • end

  • center

  • stretch

  • baseline

  • first baseline

  • last baseline

.grid {

 grid-template-rows: 80px 80px;

 grid-template-columns: 1fr 1fr;

 grid-template-areas: "content content"

                      "content content";

}

.item { grid-area: content }

.grid {

 justify-items: start

}

Позиции расположены в начале оси строки.


Justify-items: center

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


Justify-items: end

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


Justify-items: stretch

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


Align-items: start

Позиции располагаются в начале оси столбца 1.


Align-items: center

Элементы располагаются в центре оси столбца.


Align-items: end

Позиции располагаются в конце оси столбца.


Align-items: stretch

Элементы растянуты по всей оси столбцов.


Justify-items: center

Align-items: center

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


Отдельные элементы могут быть выровнены с align-self и justify-self. Эти свойства поддерживают следующие значения:

  • auto

  • normal

  • start

  • end

  • center

  • stretch

  • baseline

  • first baseline

  • last baseline

.item-1 {justify-self: start}

.item-2 {justify-self: center}

.item-3 {justify-self: end}

justify-self – выравнивает отдельные элементы вдоль оси строки.


.item-1 {align-self: start}

.item-2 {align-self: center}

.item-3 {align-self: end}

align-self – выравнивает элементы вдоль оси столбца.


.item-1 {

 justify-self: center

 align-self:   center

}

Позиция 1 расположена в центре осей строк и столбцов.


Выравнивание колонок сетки

Колонки сетки могут быть выровнены относительно контейнера сетки вдоль осей строк и столбцов.

align-content – выравнивает дорожки вдоль оси строки и выравнивает содержимое вдоль оси столбца. Они поддерживают следующие свойства:

  • normal

  • start

  • end

  • center

  • stretch

  • space-around

  • space-between

  • space-evenly

  • baseline

  • first baseline

  • last baseline

.grid {

 width: 100%;

 height: 300px;

 grid-template-columns: repeat(4, 45px);

 grid-template-rows: repeat(4, 45px);

 grid-gap: 0.5em;

 justify-content: start;

}

start выравнивает дорожки столбца вдоль и в начале оси строки - это значение по умолчанию.


Justify-content: end;

Столбцы выровнены в конце оси строки.


Justify-content: center;

Столбцы выровнены по центру оси строки.


justify-content: space-around;

Оставшееся пространство контейнера сетки распределяется и применяется к началу и концу каждой дорожки столбца.


justify-content: space-between;

Оставшееся пространство распределяется между строками столбцов.


justify-content: space-evenly;

Оставшееся пространство распределяется там, где пространство между столбцами равно пробелу в начале и конце строки.


align-content: start;

start выравнивает строки в начале оси столбца и является значением по умолчанию.


align-content: end;

Строки выравниваются в конце оси столбца.


align-content: center;

Строки выравниваются по центру оси столбца.


align-content: space-around;

Оставшееся пространство контейнера сетки распределяется и применяется к началу и концу каждой строки.


align-content: space-between;

Оставшееся пространство распределяется между дорожками строк.


align-content: space-evenly;

Оставшееся пространство распределяется, между строками равно пробелу в начале и конце столбца.


Это руководство призвано дать вам достаточно полный обзор о Grid CSS; Однако оно не претендует на полноту технической документации. Обязательно проверьте спецификации Mozilla Developer Network и W3C для еще более глубокого погружения.




CSS Grid, CSS
Читайте также:
3 новых CSS-функции для изучения в 2017 году

3 новых CSS-функции для изучения в 2017 году

В этом посте, поговорить хочу про CSS, а если быть точнее про новые его фишки которые стоить знать.
Читать
PhpStorm, правильная настройка для web-разработки

PhpStorm, правильная настройка для web-разработки

В этом посте хочу поделится своим опытом, как правильно работать с IDE PhpStorm и удаленным web сервером. ...

Читать
Flexbox и как делать адаптивные сайты

Flexbox и как делать адаптивные сайты

Современный front-end разработчик активно должен уметь применять на практике различные инструменты, позволяющи...
Читать