Сетка в CSS

CSS Grid Layout — это новый и многообещающий инструмент для дизайна макетов. С помощью сетки вы можете создавать такие макеты, которые раньше было невозможно реализовать с использованием CSS. Возможности сетки практически безграничны. Grid считается "лучшей системой для создания макетов в HTML". В этой статье мы разберём, что такое Grid, и поделимся полезной информацией.

Сетка поддерживается почти всеми браузерами, так что пришло время начинать обучение!

Содержание

• Основные понятия
• Свойства CSS Grid
  • Для контейнера
  • display:
  • grid-template-rows:
  • grid-template-columns:
  • grid-template-areas:
  • grid-template:
  • repeat() — функция
  • minmax() — функция
  • grid-row-gap:
  • grid-column-gap:
  • grid-gap:
  • align-content:
  • justify-content:
  • place-content:
  • align-items:
  • justify-items:
  • place-items:
  • grid-auto-rows:
  • grid-auto-columns:
  • grid-auto-flow:
  • grid:
• Для элементов
  • grid-row-start:
  • grid-row-end:
  • grid-column-start:
  • grid-column-end:
  • grid-row:
  • grid-column:
  • grid-area:
  • align-self:
  • justify-self:
  • place-self:
• Примеры
  • HTML структура страницы
  • Структура для игровой приложения
  • Простой блок на сетке
  • Мэйсонри на сетке
• Сравнение Flex и Grid
• Поддержка браузерами
• Видеоматериалы о Grid

Основные понятия

Grid — это решётка с элементами на ней. Вы можете располагать элементы так, как вам удобно. Представьте себе шахматную доску: контейнер Grid — это доска, а элементы — это фигуры. Вы можете размещать их по своему усмотрению.

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

Структура сетки

• Контейнер — это элемент, который содержит расположение Grid, где располагаются элементы.

• Элементы — это HTML-элементы внутри сетки, которые становятся дочерними элементами контейнера. Для того чтобы элемент появился в сетке, он должен содержать что-то внутри себя (текст, другие HTML-теги). Пустой элемент — это просто ячейка для размещения чего-либо.

• Линии — это воображаемые линии, которые разделяют сетку на столбцы и строки. Линии автоматически нумеруются. Вы также можете давать имена линиям, чтобы потом привязывать к ним элементы.

• Строка/Столбец (track) — это всё, что находится между соседними линиями, т.е. линии разделяют сетку на строки и столбцы.

• Ячейка — это место, где будет находиться элемент. Ячейка — это пересечение столбца и строки.

• Область — это комбинация одной или нескольких ячеек в одну большую ячейку (область). Области можно называть для удобства размещения элементов.

• Зазор — это расстояние между строками и столбцами, которое создает пустое пространство. Это своего рода отступ между ячейками. Если указать зазор, между строками и столбцами появится пространство.

Чтобы включить Grid, любому HTML-элементу нужно задать свойство CSS:

.grid { display: grid; }
.inline-grid { display: inline-grid; }

Свойства CSS Grid

Для контейнера

display:

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

• grid — элемент занимает всю ширину и имеет своё пространство среди соседних элементов.
• inline-grid — элемент оборачивается другими элементами и форматируется как блочный элемент.

.grid {
    display: grid;
}

grid-template-rows: grid-template-columns:

Указывает, сколько строк и столбцов будет в сетке и какими будут их размеры. Значения задаются через пробелы:

grid-template-rows: size size ...;
grid-template-columns: size size ...;

Примеры значений:

grid-template-rows: auto auto;
grid-template-columns: 100px 1fr;

grid-template-areas:

Позволяет создать визуальный шаблон сетки. В этом свойстве имена присваиваются ячейкам, а затем к этим именам привязываются элементы через свойство grid-area:.

grid-template-areas: 
    "header header header"
    "main    sidebar sidebar"
    "footer footer footer";

Для элементов

grid-area:

Дает элементу имя. По имени элемент будет ссылаться на область, указанную в свойстве grid-template-areas:.

.item {
    grid-area: header;
}

align-self: justify-self: place-self:

Выравнивают текущий элемент внутри ячейки.

align-self: center; /* выровнять элемент вертикально */
justify-self: start; /* выровнять элемент горизонтально */

Примеры

HTML структура страницы

    
header
    
    
section
    
    

Сравнение Flex и Grid

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

Поддержка браузерами

Grid поддерживается большинством современных браузеров. Чтобы проверить, поддерживает ли текущий браузер Grid в CSS, можно использовать @supports:

@supports( display: grid ) {
    div { display: grid; }
}

@supports not( display: grid ) {
    div { display: flex; }
}

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