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

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

Расположение сетки не зависит от положения элементов в разметке, следовательно, вы можете перетасовать размещения элементов в разметке без изменения макета. В сеточной модели элементом контейнера является разделены на столбцы и строки сетки (вместе известный как сетка треков) от линии сетки. Теперь посмотрим, как создать образец сетки.

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

На момент написания этой статьи CSS Grid Module поддерживается только последним браузером IE и Edge. CSS Grid - это в экспериментальной стадии в других основных браузерах, в которых вы должны включить поддержку вручную:

• Fire Fox: Нажмите Shift + F2, введите следующую команду в строку ввода GCLI, которая появилась в нижней части браузера: pref set layout.css.grid.enabled true.
• Хром: Просмотрите хром: // флаги URL и включить Экспериментальные возможности веб-платформы.

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

Образец сетки

к превратить элемент в контейнер сетки ты можешь использовать один из этих трех дисплей свойства:

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

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

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

 
 
верхний
 
Оставил
 
центр
 
Правильно
 
Низ
 
 

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

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

 .grid-container ширина: 500px; высота: 500 пикселей; дисплей: сетка; области шаблона сетки: "верхний верхний верх", левый центральный правый "" нижний нижний нижний ";  .grid-top grid-area: top;  .grid-bottom grid-area: bottom;  .grid-left grid-area: left;  .grid-right grid-area: right;  .grid-center grid-area: center;  

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

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

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

Вот как выглядит наша CSS-сетка (с некоторыми дополнительными стилями):

Пространство между элементами сетки

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

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

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

Выровнять содержимое сетки и элементы

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

Где применимо, размер дорожки (строки или столбца) сжимается, чтобы соответствовать содержанию когда выровнен. Посмотрите на скриншоты содержимого сетки выровнены с разными значениями ниже.

justify-content: начало;

justify-content: end;

justify-content: центр;

justify-content: пробел между

justify-content: пространство вокруг;

выровнять содержание: равномерно;

align-content: start;

align-content: end;

выравнивание контента: центр;

выровнять содержание: пространство между;

выровнять содержание: пространство вокруг;

выровнять содержание: пространство равномерно;

Оба обосновывать-контент а также выравнивать-контент свойства выровнять весь контент в сетке.

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