CSS - Grid

Что это такое?

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

Состоит из Grid-контейнера и Grid-элементов.

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

Чтобы создать Grid, нужно присвоить родительскому элементу свойство display: grid. После этого все прямые потомки элемента становятся grid-элементами.

Далее определяется количество колонок и рядов в grid-контейнере.

Рассмотрим простой пример создание grid'a.

<div class="grid">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
</div>

.grid { 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
}

.grid > div {
  font-size: 5vw;
  padding: .5em;
  background: green;
  text-align: center;
}

И вот каким будет результат:

Разберем, что сейчас произошло:

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

Рассмотрим подробнее свойства родительского контейнера.

display: grid - определяет данный элемент как grid-контейнер.
grid-template-rows - указывает количество рядов (строк) в grid-контейнере. В нашем примере - это 3 ряда, каждый из которых равен 1fr.
Примечание
fr - это единица гибкости, обеспечивающая гибкость макета. Указывается в основном на grid-контейнере. Все элементы контейнера, размер которых равен 1fr, имеют одинаковый размер, независимо от их количества.
grid-template-columns - указывает количество столбцов в grid-контейнере. В нашем примере - это 4 столбца, каждый из которых равен 1fr.
Примечание
Функция repeat() позволяет избежать дублирования значений размера элемента: grid-template-columns: repeat(4, 1fr) эквивалентно grid-template-columns: 1fr 1fr 1fr 1fr.
grid-gap - вставляет разрыв между элементами.
Примечание
grid-column-gap и grid-row-gap позволяют делать разные разрывы между столбцами и строками.

Добавим новые свойства в CSS:

.grid { 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
  grid-template-areas:
  "item1 item2 item3 item4"
  "item5 item6 item7 item8"
  "item9 item10 item11 item12"
}

.grid > div {
  font-size: 5vw;
  padding: .5em;
  background: green;
  text-align: center;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.item4 {
  grid-area: item4;
}

.item5 {
  grid-area: item5;
}

.item6 {
  grid-area: item6;
}

.item7 {
  grid-area: item7;
}

.item8 {
  grid-area: item8;
}

.item9 {
  grid-area: item9;
}

.item10 {
  grid-area: item10;
}

.item11 {
  grid-area: item11;
}

.item12 {
  grid-area: item12;
}

И вот результат:

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

Рассмотрим новые свойства:

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

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

Например, изменим шаблон:

.grid { 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
  grid-template-areas:
  "item11 item2 item3 item5"
  "item4 item6 item12 item8"
  "item9 item10 item1 item7"
}

И получим:

Внесем еще изменения:

.grid { 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
  grid-template-areas:
  "item11 item11 item11 item5"
  "item4 item6 item12 item8"
  "item9 item10 item1 item7"
  "item3 item3 item2 item2"
}

Получим:

Основные свойства grid-контейнера

justify-items - выравнивает содержимое вдоль оси строки. Возможные значения:
- start - выравнивает содержимое по левой стороне области.
- end - выравнивает содержимое по правой стороне области.
- center - выравнивает содержимое по центру области.
- stretch - заполняет всю ширину области (по умолчанию).
Добавим justify-items в наш код:
```
.grid { 
  display: grid;
  justify-items: start;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
  grid-template-areas:
  "item11 item11 item11 item5"
  "item4 item6 item12 item8"
  "item9 item10 item1 item7"
  "item3 item3 item2 item2"
}
```
Получим:
Результат для justify-items: end:
Результат для justify-items: center:
align-items - выравнивает содержимое вдоль оси столбца. Возможные значения:
- start - выравнивание элементов по верхней части области
- end - выравнивание элементов по нижней части области
- center - выравнивание элементов по центру области
- stretch - заполняет всю высоту области (по умолчанию)
Добавим align-items в наш код:
```
.grid { 
  display: grid;
  align-items: start;
  grid-template-rows: 2fr 1fr 2fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
  grid-template-areas:
  "item11 item11 item11 item5"
  "item4 item6 item12 item8"
  "item9 item10 item1 item7"
  "item3 item3 item2 item2"
}
```
Получим:
Результат для align-items: center:
Результат для align-items: end:
Результат для align-items: stretch (значение по умолчанию):
justify-content - если grid-элементам задан фиксированный размер, размер сетки может быть меньше размера контейнера. Данное свойство выравнивает сетку вдоль оси строки. Возможные значения:
- start - выравнивает сетку по левой стороне контейнера.
- end - выравнивает сетку по правой стороне контейнера.
- center - выравнивает сетку по центру контейнера.
- stretch - масштабирует элементы так, чтобы сетка могла заполнить всю ширину контейнера.
- space-around - одинаковое пространство между элементами, и полуразмерные отступы по краям.
- space-between - одинаковое пространство между элементами, без отступов по краям.
- space-evenly - одинаковое пространство между элементами, и полноразмерные отступы по краям.
Рассмотрим несколько примеров:
```
.grid { 
  display: grid;
  justify-content: space-between;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 70px 80px 80px 60px;
  grid-gap: 2vw;
  grid-template-areas:
  "item11 item11 item11 item5"
  "item4 item6 item12 item8"
  "item9 item10 item1 item7"
  "item3 item3 item2 item2"
}
```
Получим:
Результат для justify-content: space-around:
Результат для justify-content: space-evenly:
align-content - если grid-элементам задан фиксированный размер, размер сетки может быть меньше размера контейнера. Выравнивает сетку вдоль оси колонки. Возможные значения:
- start - выравнивает сетку по верхней части контейнера.
- end - выравнивает сетку по нижней части контейнера.
- center - выравнивает сетку по центру контейнера.
- stretch - масштабирует элементы так, чтобы сетка могла заполнить всю высоту контейнера.
- space-around - одинаковое пространство между элементами, и полуразмерные отступы по краям.
- space-between - одинаковое пространство между элементами, без отступов по краям.
- space-evenly - одинаковое пространство между элементами, и полноразмерные отступы по краям.
Рассмотрим несколько примеров:
```
.grid { 
  display: grid;
  min-height: 100vh;
  justify-content: space-evenly;
  align-content: start;
  grid-template-rows: 10% 10% 10% 10%;
  grid-template-columns: 70px 80px 80px 60px;
  grid-gap: 2vw;
  grid-template-areas:
  "item11 item11 item11 item5"
  "item4 item6 item12 item8"
  "item9 item10 item1 item7"
  "item3 item3 item2 item2"
}

.grid > div {
  font-size: 5vw;
  background: green;
  text-align: center;
}
```
Получим:
Результат для align-content: space-between:

Отзывчивый Grid

При использовании CSS Grid часто используются такие значения как auto-fill и auto-fit.

Они применяются следующим образом:

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

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

Другой пример:

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

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

Сравнение:

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

Явный grid - определенный в grid-template-rows, grid-template-columns и grid-template-areas. Однако, на практике бывают элементы, которые не умещаются в явно определенный grid. Например, grid-контейнер на 6 элементов на самом деле включает в себя 8 элементов.

Неявные grid'ы автоматически генерируются grid-контейнером, который добавляет неявные строки в grid.

Рассмотрим пример:

<div class="grid">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
</div>

.grid { 
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2vw;
}

.grid > div {
  font-size: 5vw;
  padding: .5em;
  background: brown;
  text-align: center;
}

Вот каким будет результат:

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

Адаптивный Grid - медиа-запросы

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

CSS Grid является идеальным инструментов для быстрого формирования адаптивного шаблона за ограниченное время. Достаточно просто переназначить значения в grid-template-areas и обернуть это все в медиа запрос!

Рассмотрим пример:

<div class="grid">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
</div>

.grid { 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
  grid-template-areas:
  "item1 item2 item3 item4"
  "item5 item6 item7 item8"
  "item9 item10 item11 item12"
  }

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

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.item4 {
  grid-area: item4;
}

.item5 {
  grid-area: item5;
}

.item6 {
  grid-area: item6;
}

.item7 {
  grid-area: item7;
}

.item8 {
  grid-area: item8;
}

.item9 {
  grid-area: item9;
}

.item10 {
  grid-area: item10;
}

.item11 {
  grid-area: item11;
}

.item12 {
  grid-area: item12;
}

@media all and (max-width: 600px) {
  .grid {
    grid-template-areas:
    "item1 item2"
    "item3 item4"
    "item5 item6"
    "item7 item8"
    "item9 item10"
    "item11 item12"
  }
}

При ширине окна браузера до 600px получим:

Какие еще возможности предоставляет GRID-контейнер?

Полезные ссылки:

PreviousМодуль 4 (Продвинутый CSS)NextПрепроцессоры CSS

Last updated 4 months ago

CSS - Grid

Что это такое?

Состоит из Grid-контейнера и Grid-элементов.

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

Далее определяется количество колонок и рядов в grid-контейнере.

Рассмотрим простой пример создание grid'a.

<div class="grid">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
</div>

.grid { 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
}

.grid > div {
  font-size: 5vw;
  padding: .5em;
  background: green;
  text-align: center;
}

И вот каким будет результат:

Разберем, что сейчас произошло:

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

Рассмотрим подробнее свойства родительского контейнера.

display: grid - определяет данный элемент как grid-контейнер.
grid-template-rows - указывает количество рядов (строк) в grid-контейнере. В нашем примере - это 3 ряда, каждый из которых равен 1fr.
Примечание
fr - это единица гибкости, обеспечивающая гибкость макета. Указывается в основном на grid-контейнере. Все элементы контейнера, размер которых равен 1fr, имеют одинаковый размер, независимо от их количества.
grid-template-columns - указывает количество столбцов в grid-контейнере. В нашем примере - это 4 столбца, каждый из которых равен 1fr.
Примечание
Функция repeat() позволяет избежать дублирования значений размера элемента: grid-template-columns: repeat(4, 1fr) эквивалентно grid-template-columns: 1fr 1fr 1fr 1fr.
grid-gap - вставляет разрыв между элементами.
Примечание
grid-column-gap и grid-row-gap позволяют делать разные разрывы между столбцами и строками.

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

Добавим новые свойства в CSS:

.grid { 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
  grid-template-areas:
  "item1 item2 item3 item4"
  "item5 item6 item7 item8"
  "item9 item10 item11 item12"
}

.grid > div {
  font-size: 5vw;
  padding: .5em;
  background: green;
  text-align: center;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.item4 {
  grid-area: item4;
}

.item5 {
  grid-area: item5;
}

.item6 {
  grid-area: item6;
}

.item7 {
  grid-area: item7;
}

.item8 {
  grid-area: item8;
}

.item9 {
  grid-area: item9;
}

.item10 {
  grid-area: item10;
}

.item11 {
  grid-area: item11;
}

.item12 {
  grid-area: item12;
}

И вот результат:

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

Рассмотрим новые свойства:

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

Например, изменим шаблон:

.grid { 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
  grid-template-areas:
  "item11 item2 item3 item5"
  "item4 item6 item12 item8"
  "item9 item10 item1 item7"
}

И получим:

Внесем еще изменения:

.grid { 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
  grid-template-areas:
  "item11 item11 item11 item5"
  "item4 item6 item12 item8"
  "item9 item10 item1 item7"
  "item3 item3 item2 item2"
}

Получим:

Потренироваться с шаблоном сетки можно .

Основные свойства grid-контейнера

justify-items - выравнивает содержимое вдоль оси строки. Возможные значения:
- start - выравнивает содержимое по левой стороне области.
- end - выравнивает содержимое по правой стороне области.
- center - выравнивает содержимое по центру области.
- stretch - заполняет всю ширину области (по умолчанию).
Добавим justify-items в наш код:
```
.grid { 
  display: grid;
  justify-items: start;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
  grid-template-areas:
  "item11 item11 item11 item5"
  "item4 item6 item12 item8"
  "item9 item10 item1 item7"
  "item3 item3 item2 item2"
}
```
Получим:
Результат для justify-items: end:
Результат для justify-items: center:
Потренироваться со свойством justify-items можно .
align-items - выравнивает содержимое вдоль оси столбца. Возможные значения:
- start - выравнивание элементов по верхней части области
- end - выравнивание элементов по нижней части области
- center - выравнивание элементов по центру области
- stretch - заполняет всю высоту области (по умолчанию)
Добавим align-items в наш код:
```
.grid { 
  display: grid;
  align-items: start;
  grid-template-rows: 2fr 1fr 2fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
  grid-template-areas:
  "item11 item11 item11 item5"
  "item4 item6 item12 item8"
  "item9 item10 item1 item7"
  "item3 item3 item2 item2"
}
```
Получим:
Результат для align-items: center:
Результат для align-items: end:
Результат для align-items: stretch (значение по умолчанию):
Потренироваться со свойством align-items можно .
justify-content - если grid-элементам задан фиксированный размер, размер сетки может быть меньше размера контейнера. Данное свойство выравнивает сетку вдоль оси строки. Возможные значения:
- start - выравнивает сетку по левой стороне контейнера.
- end - выравнивает сетку по правой стороне контейнера.
- center - выравнивает сетку по центру контейнера.
- stretch - масштабирует элементы так, чтобы сетка могла заполнить всю ширину контейнера.
- space-around - одинаковое пространство между элементами, и полуразмерные отступы по краям.
- space-between - одинаковое пространство между элементами, без отступов по краям.
- space-evenly - одинаковое пространство между элементами, и полноразмерные отступы по краям.
Рассмотрим несколько примеров:
```
.grid { 
  display: grid;
  justify-content: space-between;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 70px 80px 80px 60px;
  grid-gap: 2vw;
  grid-template-areas:
  "item11 item11 item11 item5"
  "item4 item6 item12 item8"
  "item9 item10 item1 item7"
  "item3 item3 item2 item2"
}
```
Получим:
Результат для justify-content: space-around:
Результат для justify-content: space-evenly:
Потренироваться со свойством justify-content можно .
align-content - если grid-элементам задан фиксированный размер, размер сетки может быть меньше размера контейнера. Выравнивает сетку вдоль оси колонки. Возможные значения:
- start - выравнивает сетку по верхней части контейнера.
- end - выравнивает сетку по нижней части контейнера.
- center - выравнивает сетку по центру контейнера.
- stretch - масштабирует элементы так, чтобы сетка могла заполнить всю высоту контейнера.
- space-around - одинаковое пространство между элементами, и полуразмерные отступы по краям.
- space-between - одинаковое пространство между элементами, без отступов по краям.
- space-evenly - одинаковое пространство между элементами, и полноразмерные отступы по краям.
Рассмотрим несколько примеров:
```
.grid { 
  display: grid;
  min-height: 100vh;
  justify-content: space-evenly;
  align-content: start;
  grid-template-rows: 10% 10% 10% 10%;
  grid-template-columns: 70px 80px 80px 60px;
  grid-gap: 2vw;
  grid-template-areas:
  "item11 item11 item11 item5"
  "item4 item6 item12 item8"
  "item9 item10 item1 item7"
  "item3 item3 item2 item2"
}

.grid > div {
  font-size: 5vw;
  background: green;
  text-align: center;
}
```
Получим:
Результат для align-content: space-between:
Потренироваться со свойством align-content можно .

Отзывчивый Grid

При использовании CSS Grid часто используются такие значения как auto-fill и auto-fit.

Они применяются следующим образом:

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

Перейдите по , и попробуйте изменить размер окна c желтыми блоками.

Другой пример:

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

Перейдите по , и попробуйте изменить размер окна c желтыми блоками.

Сравнение:

auto-fill:

auto-fit:

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

Неявные grid'ы автоматически генерируются grid-контейнером, который добавляет неявные строки в grid.

Рассмотрим пример:

<div class="grid">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
</div>

.grid { 
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2vw;
}

.grid > div {
  font-size: 5vw;
  padding: .5em;
  background: brown;
  text-align: center;
}

Вот каким будет результат:

Потренироваться можно .

Адаптивный Grid - медиа-запросы

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

Рассмотрим пример:

<div class="grid">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
</div>

.grid { 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
  grid-template-areas:
  "item1 item2 item3 item4"
  "item5 item6 item7 item8"
  "item9 item10 item11 item12"
  }

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

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.item4 {
  grid-area: item4;
}

.item5 {
  grid-area: item5;
}

.item6 {
  grid-area: item6;
}

.item7 {
  grid-area: item7;
}

.item8 {
  grid-area: item8;
}

.item9 {
  grid-area: item9;
}

.item10 {
  grid-area: item10;
}

.item11 {
  grid-area: item11;
}

.item12 {
  grid-area: item12;
}

@media all and (max-width: 600px) {
  .grid {
    grid-template-areas:
    "item1 item2"
    "item3 item4"
    "item5 item6"
    "item7 item8"
    "item9 item10"
    "item11 item12"
  }
}