Що таке власність сітки?

Властивість сітки - це скорочена властивість для рядків-шаблонів-рядків, стовпців-шаблонів-стовпців, областей-шаблонів сітки, сітки-авто-рядків, сітки-авто-стовпців, сітки-автопотоку, сітки-стовпців-розривів та властивості сітки рядкових рядків.

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

Властивість сітки робить елементи відображення як матриця ⊞

 
 
 
 
 
 
 
 

У css

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

Наприклад, #container відображається у вигляді сітки, а його дочірній елемент відображатиметься як комірки сітки або елементи

Сумісність браузера

Це величезне хвилювання, що IE, Edge, Firefox підтримує властивість сітки CSS . Переважно весь браузер має прекрасний інтерфейс для перегляду сітки в інструментах для розробників.

Ліній сітки

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

Властивості → сітка-стовпець-початок, сітка-стовпець-кінець, сітка-рядок-кінець, сітка-рядок-кінець.

Приклад коду:

#grid> div: nth-дитина (2) {
 сітка-стовпчик-старт: 2;
 сітка-стовпчик-кінець: 3;
 сітка-рядок-початок: 2;
 сітка-рядок-кінець: 3;
}

Елемент 2 розпочнеться з другої вертикальної лінії у 2 горизонтальній лінії, а елемент закінчиться 3 вертикальною лінією та 3 вертикальною лінією.

Лінія сітки

Сітка комірка

Комір сітки - це простір між двома сусідніми вертикальними лініями сітки та двома сусідніми горизонтальними лініями сітки.

Сітка стільника

Сітки треків

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

Сітка трек

Площа сітки та розрив сітки

Площа сітки - це група однієї або декількох комірок.

Grid Gap - простір між рядками та стовпцями. Його скорочення властивості grid-row-gap та grid-column-gap.

Графа "Рядок та сітка"

grid-row - це скорочене властивість для grid-row-start та grid-row-end.

grid-column є скороченим властивістю для grid-column-start і grid-column-end

Сітка ряду

grid-row-start → визначає початкове положення елемента сітки в рядку

напр. grid-row-start: 2 → Елемент почнеться з другої вертикальної лінії

grid-end-end → визначає кінцеве положення елемента сітки в рядку

напр. grid-row-end: 3 → Елемент закінчиться на другій вертикальній лінії

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

Він контролює, як працює алгоритм автоматичного розміщення. За замовчуванням значення - рядок (елементи розміщуються в основі рядків)

grid-auto-flow: рядок;
grid-auto-flow: стовпець;
Решітка стовпців автоматичного потоку та рядок автоматичного потоку сітки

grid-auto-flow: рядок щільний → Використовується алгоритм "щільного" упаковки. Заповніть вільний простір у сітці на основі рядків.

grid-auto-flow: стовпчик щільний → Використовує алгоритм упаковки "щільного". Заповніть вільний простір у сітці на основі стовпців

Явна сітка та неявна сітка

Явна сітка - це сітка, створена користувачем за допомогою grid-template-row, grid-template-column

grid-template-столбцы: повторити (3, 100px);
сітка-шаблон-рядки: 100px 100px;

Неявна сітка створюється браузером. Розмір неявної сітки можна змінити за допомогою властивості grid-auto-column та grid-auto-рядки.

grid-template-столбцы: повторити (3, 100px);
сітка-авто рядки: 100 пікселів;

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

Ми можемо замовити елемент за властивістю області шаблону.

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

перевірити кодпек для отримання додаткової інформації.

Для сітки в основному всі ми використовуємо систему сітки для завантаження. Bootstrap може змінювати назву класу в кожній версії (але не як кутова ), тому нам потрібно пам'ятати, яка версія має назву класу .

Використовуючи властивість сітки CSS, МИ МОЖЕМ (навіть в IE ) легко відображати елементи у вигляді сітки.

Дякую велике за прочитане! Якщо вам сподобалося, будь ласка, підтримайте, поклавши та поділившись публікацією. Не соромтесь залишати коментар нижче.