user

Авторизация

Добро пожаловать!

Регистрация

Graf

Кодинг

Руководство по Grid CSS. Коротко и понятно

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

 Для подключения Grid в CSS файле пропишем следующий код:

 В данном примере мы подключили Grid двумя разными способами, с помощью обычного свойства «grid» и с помощью «inline-grid». Данные свойства отличаются тем что обычный grid является блоком, а inline-grid строкой, подобно display: block и display: inline-block.

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

 Если нужно создать блок с несколькими столбцами и строками то рассмотрим следующий пример.

 Здесь вся сетка была разделена в три ряда и в три столбца. Причем как можно заметить все строки и столбцы разных размеров. Сделано это было с помощью параметра «grid: [значения строк через пробел] / [значения столбцов через пробел];», в котором сначала указываем параметры строк, а потом параметры столбцов. Количество рядов и столбцов зависит от того сколько значений вы укажете. Если указать одно значения для строк и восемь для столбцов, то все элементы выстроятся по горизонтали.

 Параметр grid-gap отвечает за расстояние между между соседними ячейками.

Параметры Grid

 Для указывания количество строк и столбцов, а также их размеров используют параметры: grid-template-rows и grid-template-columns. Количество значений означает количество строк или столбцов.

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

 Примеры всех возможных значений:

 Для создание визуальной сетки шаблона воспользуемся параметром grid-template-areas.

 В кавычках нужно указываются имена и каждая кавычка представляет собой ряд. Если имена повторяются, то ячейки будут объединены в одну область. В случае если на месте имени стоит точка (.), то данная ячейка будет пустая.

 Для того чтобы задать разрыв между рядами используется grid-row-gap.

 Для того чтобы задать разрыв между столбцами используется grid-column-gap.

 Для того чтобы сразу задать разрыв между столбцами и колонками используется grid-gap.

 Для выравнивания также как и в Flexbox используются параметры align-content, justify-content и place-content.

 Чтобы задать размер для авто-создаваемых (неявных) рядов или колонок стоит воспользоваться grid-auto-rows и grid-auto-columns.

 Когда у объектов не указано в какой ячейке они должны находится, то тогда они автоматически размещаются в свободные ячейки. Чтобы определить логику распределения объектов используется параметр grid-auto-flow. Данный параметр имеет три свойства:

  • row – распределяет объекты по рядам;
  • column – распределяет объекты по столбцам;
  • dense – будет размещать элементы так чтобы не оставалось пустых ячеек.

 Если объект должен размещаться в определенной ячейке, то стоит воспользоваться параметрами: