Введение в модуль CSS Grid Layout

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

Читайте также: Шаблоны Flexbox: Максимальная библиотека CSS-кодов Flexbox

Раскладка сетки не зависит от положения элементов в разметке, следовательно, вы можете перетасовать размещения элементов в разметке без изменения макета. В сеточной модели элемент контейнера сетки делится на столбцы и строки сетки (вместе известные как дорожки сетки) линиями сетки. Теперь давайте посмотрим, как создать образец сетки.
Поддержка браузера
На момент написания этой статьи CSS Grid Module поддерживается только новейшим браузером IE и Edge , CSS Grid находится на экспериментальной стадии в других основных браузерах, в которых вы должны включить поддержку вручную:

• Firefox: нажмите Shift + F2, введите следующую команду в строке ввода GCLI, которая появилась в нижней части браузера: pref set layout.css.grid.enabled true.
• Chrome. Просмотрите URL-адрес chrome: // и включите функции экспериментальной веб-платформы.

Поддержка всех основных браузеров, вероятно, появится в начале / середине 2017 года.

Рекомендуемое чтение: 15 команд графической командной строки (GCLI) в Firefox для разработчиков переднего плана

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

1. дисплей: сетка; — элемент преобразуется в контейнерную сетку
2. дисплей: inline-grid; — элемент преобразуется в контейнер встроенной сетки
3. дисплей: подсетка; — если элемент является элементом сетки, он преобразуется в подсетку, которая игнорирует свойства шаблона сетки и разрыва сетки

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

Мы собираемся создать сетку с пятью секциями (областями сетки): сверху, снизу, слева, справа и по центру. HTML состоит из пяти элементов div внутри контейнера.

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

На имена областей сетки должны ссылаться Сетка-зона свойство отдельных элементов сетки.

.grid-container {
  ширина: 500 пикселей;
  высота: 500 пикселей;
  дисплей: сетка;
  grid-template-area: «сверху вверх сверху»
                        «левый центр, правый»
                        «нижний нижний нижний»;
}
.grid-top {
  область сетки: верх;
}
.grid-bottom {
  площадь сетки: снизу;
}
.grid-left {
  область сетки: слева;
}
.grid-right {
  площадь сетки: справа;
}
.grid-центр {
  область сетки: центр;
}

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

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

.grid-container {
  ширина: 500 пикселей;
  высота: 500 пикселей;
  дисплей: сетка;
  grid-template-area: «сверху вверх сверху»
                       «левый центр правый»
                       «нижний нижний нижний»;
  grid-template-columns: 100px, авто 100px;
  сетка-шаблон-строки: 50px авто 150px;
}

Вот как выглядит наша CSS-сетка (с некоторыми дополнительными стилями):
ИЗОБРАЖЕНИЕ: пространство сетки между элементами сетки
Вы можете добавить пустое пространство между столбцами и строками, используя Сетка-колонный разрыв а также Сетка-рядный разрывили их собственное свойство Сетка зазора,

.grid-container {
  ширина: 500 пикселей;
  высота: 500 пикселей;
  дисплей: сетка;
  grid-template-area: «сверху вверх сверху»
                       «левый центр правый»
                       «нижний нижний нижний»;
  grid-template-columns: 100px, авто 100px;
  сетка-шаблон-строки: 50px авто 150px;
  разрыв сетки: 5px 5px;
}

Ниже вы можете видеть, что свойство grid-gap добавляло пробелы между элементами сетки.
Изображение: сетка с пробелом между дорожками. Выравнивание содержимого сетки и элементов
обосновывать-контент Свойство контейнера сетки (.grid-container) выравнивает содержимое сетки по линейной оси (горизонтальная ось) и свойство ALIGN-контентвыравнивает содержимое сетки по оси блока (вертикальная ось). Оба свойства могут иметь одно из следующих значений: начало, конец, центр, пространство между, пространство вокруг и пространство равномерно.

Где это применимо, размер дорожки (строки или столбца) сжимается, чтобы соответствовать содержимому при выравнивании. Посмотрите на скриншоты содержимого сетки, выровненные по разным значениям ниже.
justify-content: начало;
justify-content: end;
justify-content: центр;
justify-content: пробел между
justify-content: пространство вокруг;
выровнять содержание: равномерно;
align-content: start;
align-content: end;
выравнивание контента: центр;
align-content: space -ween;
выровнять содержание: пространство вокруг;
выровнять контент: пространство равномерно;
Свойства justify-content и align-content выравнивают весь контент в сетке.

Чтобы выровнять отдельные элементы в пределах их областей сетки, используйте другую пару свойств выравнивания: обосновывать-детали а также ALIGN-элементы, Оба могут иметь одно из следующих значений: начало, конец, центр, базовая линия (выровнять элементы вдоль базовой линии сетки области) и растянуть (элементы заполняют всю их область).