Вступ до модуля CSS Grid Layout

Це було колись таблиці, потім поля і поплавці, потім flexbox а зараз сітки: CSS завжди керувався новими і кращими способами, щоб полегшити вічну роботу кодування веб-макетів. The Модель компонування сітки CSS може створювати та оновлювати макет уздовж двох осей: горизонтальна і вертикальна, впливає як на ширину, так і на висоту елементів.

Макет сітки не залежить від положення елементів у розмітці, отже, ви можете перемішати місця розташування елементів в розмітці без зміни макета. У сітці модель є елементом контейнера сітки розділені на стовпчики та рядки сітки (загальновідомо як решітки сітки) від лінії сітки. Тепер подивимося, як це зробити створити зразок сітки.

Підтримка браузера

Що стосується написання цієї статті, модуль сітки CSS підтримується лише останнім браузером IE і Edge. Сітка CSS є в експериментальній стадії в інших основних браузерах, в яких ви повинні увімкніть підтримку вручну:

• Firefox: Натисніть Shift + F2, введіть наступну команду на панелі вводу GCLI, яка відображається внизу браузера: pref set layout.css.grid.enabled true.
• Chrome: Перегляньте chrome: // flags URL та ввімкнути Експериментальні функції веб-платформи.

Вероятно, всі основні підтримки браузера на початку / середині 2017 року.

Приклад сітки

До перетворити елемент в контейнер сітки можна використовувати один з цих трьох відображення властивості:

1. дисплей: сітка; - елемент є перетворюється в контейнер сітки блоків
2. дисплей: вбудована сітка; - елемент є перетворюється на вбудований контейнер сітки
3. дисплей: подсетевая; - якщо елемент є елементом сітки, то він є перетворено в підсеть що ігнорує властивості сітки та сітки

Так само, як таблиця складається з декількох комірок таблиці, є сітка складається з декількох клітин сітки. Елемент сітки призначається набору клітин сітки що називається спільно площі сітки.

Ми збираємося створити сітка з п'ятьма секціями (сітки): верхній, нижній, лівий, правий і центр. HTML складається з п'ять divs всередині контейнера div.

 
 
Угору
 
Ліворуч
 
центр
 
Право
 
Знизу
 
 

У CSS, сітки-шаблонні області власності визначає сітку з різними областями сітки. За своєю цінністю, рядок представляє рядок сітки і кожне дійсне ім'я в рядку являє собою стовпець. До створити порожню комірку сітки потрібно використовувати крапка (.) характер в рядку рядка.

The назви областей сітки посилаються на площа сітки властивість окремих елементів сітки.

 .сітка-контейнер ширина: 500px; висота: 500px; дисплей: сітка; grid-template-areas: "top top top" "лівий центр справа" "знизу знизу";  .grid-top grid-area: top;  .grid-bottom сітка-область: знизу;  .grid-left grid-area: left;  .grid-right grid-area: right;  .grid-центр сітка-область: центр;  

Так створюється цей код сітка з трьома рядками і стовпцями. The зверху елемент займає область, що охоплює три стовпці в першому рядку і знизу елемент охоплює три колонки в останньому рядку. Кожен з зліва, центр і право пунктів один стовпець у середньому рядку.

Тепер нам потрібно призначати розміри до цих рядків і стовпців. The grid-template-колонки і grid-template-рядки властивості визначити розмір доріжки сітки (рядок або стовпець).

 .сітка-контейнер ширина: 500px; висота: 500px; дисплей: сітка; grid-template-areas: "top top top" "лівий центр справа" "знизу знизу"; grid-template-колонки: 100px auto 100px; grid-template-рядки: 50px auto 150px;  

Ось як виглядає наша сітка CSS (з деякими додатковими стилями):

Простір між елементами сітки

Можна додати пробіл між стовпцями та рядками використання сітка-колонка-зазор і сітка-рядок, або їх майно сітка-розрив.

 .сітка-контейнер ширина: 500px; висота: 500px; дисплей: сітка; grid-template-areas: "top top top" "лівий центр справа" "знизу знизу"; grid-template-колонки: 100px auto 100px; grid-template-рядки: 50px auto 150px; розрив сітки: 5px 5px;  

Нижче ви можете побачити, що сітка-розрив власність додала прогалини між елементами сітки дійсно.

Вирівнювання вмісту та елементів сітки

The обгрунтувати-зміст властивість контейнера сітки (.сітка-контейнер) вирівнює вміст сітки вздовж вбудованої осі (горизонтальна вісь) і майно align-content, вирівнює вміст сітки уздовж осі блоку (вертикальна вісь). Обидва властивості може мати одне з цих значень: початок, кінець, центр, простір-між, простір-навколо і просторово-рівномірно.

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

justify-content: start;

justify-content: end;

justify-content: центр;

justify-content: space-between;

justify-content: простір-навколо;

justify-content: просторово-рівномірно;

align-content: start;

align-content: end;

align-content: центр;

align-content: пробіл-між;

align-content: пробіл;

align-content: рівномірно;

Обидва обгрунтувати-зміст і align-content властивості вирівнювати весь вміст у межах сітки.

До вирівнювати окремі елементи в межах їх сітки, використовувати інші пари властивостей вирівнювання: обґрунтуйте-пункти і align-items. Обидва можуть мати одне з цих значень: початок, кінець, центр, базової лінії (вирівнювати елементи вздовж лінії базової сітки області) і розтягування (елементи заповнюють всю область).