Что такое Grid Property?

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

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

Свойство Grid позволяет отображать элементы в виде матрицы.

 
 
 
 
 
 
 
 

В css

#container {
 дисплей: сетка;
 }

В примере #container отображается в виде сетки, а его дочерние элементы отображаются в виде ячеек или элементов сетки

Совместимость браузера

Это большое волнение, что IE, Edge, Firefox поддерживает свойство CSS grid grid. В основном все браузеры имеют красивый интерфейс просмотра сетки в инструментах разработчика.

Линии сетки

Линии сетки - это горизонтальные и вертикальные линии, они используются для позиционирования. Индекс позиционирования может быть целым числом (как отрицательным, так и положительным целым числом).

Свойства → grid-column-start, grid-column-end, grid-row-end-end, grid-row-end-end.

Образец кода :

#grid> div: nth-child (2) {
 grid-column-start: 2;
 конец столбца сетки: 3;
 сетка-ряд-начало: 2;
 конец строки сетки: 3;
}

Элемент 2 начинается со второй вертикальной линии по 2 горизонтальной линии, а элемент заканчивается по 3 вертикальной линии и 3 вертикальной линии.

Линия сетки

Сетка ячейка

Ячейка сетки - это пространство между двумя смежными вертикальными линиями сетки и двумя соседними горизонтальными линиями сетки.

Сетка Ячейка

Сетка треков

Дорожка сетки - это пространство между двумя соседними линиями сетки. то есть строка, столбцы.

Сетка Трек

Площадь сетки и разрыв сетки

Область сетки - это группа из одной или нескольких ячеек.

Сетка Gap - это пространство между строками и столбцами. Это сокращенное свойство grid-row-gap-gap и grid-column-gap.

Сетка Строка и Сетка колонка

grid-row является сокращенным свойством для grid-row-start и grid-row-end.

grid-column является сокращенным свойством для grid-column-start и grid-column-end

Сетка рядная

grid-row-start → указывает начальную позицию элемента сетки в строке

eg.grid-row-start: 2 → Элемент начнется со второй вертикальной линии

grid-row-end → указывает конечную позицию элемента сетки в строке

eg.grid-row-end: 3 → Элемент заканчивается на второй вертикальной линии

Сетка-авто-поток

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

Сетка-авто-поток: строка;
Сетка-авто-поток: колонка;
Столбец автоматического потока сетки и ряд автоматического потока сетки

grid-auto-flow: row плотность → Использует «плотный» алгоритм упаковки. Заполните свободное место в сетке на основе строк.

grid-auto-flow: плотный столбец → Использует «плотный» алгоритм упаковки. Заполните свободное пространство в сетке на основе столбца

Явная Сетка и Неявная Сетка

Явная сетка - это сетка, созданная пользователем с использованием grid-template-row, grid-template-columns

grid-template-columns: repeat (3, 100px);
сетки-шаблоны-строки: 100px 100px;

Неявная сетка создается браузером. Размер неявной сетки можно изменить с помощью свойства grid-auto-columns и grid-auto-row.

grid-template-columns: repeat (3, 100px);
автоматические строки сетки: 100px;

Порядок сетки:

Мы можем заказать элемент по свойству области шаблона.

мы можем изменить область шаблона в медиа-запросе и отобразить новую структуру сетки.

проверьте кодовое устройство для получения дополнительной информации.

Для сетки, в основном, мы все используем систему сетки начальной загрузки. Bootstrap может изменять некоторые имена классов в каждой версии (но не как Angular ), поэтому нам нужно помнить, какая версия имеет какое имя класса .

Используя свойство сетки CSS, мы МОЖЕМ (даже в IE) легко отображать элементы в виде сетки.

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