Основи GRID

Grid модуль для CSS був розроблений робочою групою CSS для того, щоб налагодити виробництво шаблонів в CSS максимально зручним. Він потрапив в рекомендації за офіційним впровадженню в лютому 2017 року, а основні бразуер почали його підтримку вже в березні 2017 року.

CSS Grid це нова модель для створення шаблонів, оптимізована для створення двовимірних макетів. Вона ідеально підходить для: шаблонів сайтів, форм, галерей і всього, що вимагає точного і чуйного позиціонування.

Технологія Flexbox CSS яка прийшла на зміну технології Float має один недолік: працює тільки в одному вимірі, а технологія Grid CSS же це робить в двох вимірах, таким чином краще підходить для створення складних, комплексних шаблонів.

Як це працює?

Grid шаблон працює за системою сіток. Grid це набір пересічних горизонтальних і вертикальних ліній, які створюють розмірність і позиціонують систему координат для контенту в самому grid-контейнері. Щоб створити Grid розмітку, просто потрібно блоку присвоїти властивість display: grid. Цей крок автоматично зробить всіх прямих нащадків цього елемента - grid елементами.

Приклад створення шаблону сторінки за Grid технологією:

Сітка (grid) являє собою набір пересічних горизонтальних і вертикальних ліній, що поділяють простір grid-контейнера на області сітки, в які можуть бути поміщені елементи сітки.

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

Доріжка сітки (grid track) - простір між двома сусідніми лініями сітки, використовується для визначення чи шпальти, або рядки сітки. Доріжка йде від одного краю контейнера до іншого, розмір залежить від розташування ліній сітки, які її визначають.

Осередок сітки (grid cell) - простір, обмежений чотирма лініями сітки, аналогічно комірці таблиці. Осередок сітки - це область, в якій можна розмістити контент.

Область сітки (grid area) - прямокутна область, обмежена чотирма лініями сітки і складається з однієї або декількох сусідніх осередків.

Елементи сітки (grid items) - окремі елементи, які призначаються області сітки (або осередку сітки). Кожен контейнер-сітка включає нуль і більш елементів сітки; кожен дочірній елемент контейнера-сітки автоматично стає елементом сітки.

Grid - контейнер