CSS Grid Layout - один з найбільш обговорюваних інструментів верстальників на даний момент. Однак він не є чимось дуже новим. Справа в тому, що система набула підтримку найвідоміших браузерів: Firefox, Chrome, Opera, а також Safari. Саме цим і викликаний такий ажіотаж в сторону Grid.
Але що ж таке CSS Grid Layout (він же Grid) насправді? На що він здатний? І чи готовий він для використання в повній мірі в проектах? Давайте розберемося в цьому і подивимося на добірку корисних ресурсів, здатних допомогти вам з початком використання Grid.
Що таке CSS Grid Layout?
Даний CSS модуль визначає двовимірну систему компонування на основі сітки, оптимізованої для дизайну користувальницького інтерфейсу. Дочірні елементи можуть бути поміщені в довільні місця (слоти) при визначеної гнучкою або фіксованого сітці макета.
Короткий опис Grid від консорціуму W3C.
Якщо у вас є час і бажання заглибитися в документацію, можете зробити це на сайті консорціуму.
Різниця між Flexbox і Grid
Головною відмінністю Grid від Flexbox є кількість вимірювань (осей). При роботі тільки з останнім вам доведеться вибирати між віссю X і віссю Y. Інакше кажучи, Flexbox може бути спрямований на створення тільки колонок або тільки рядків. Однак ці інструменти не конкурують один з одним, тому можна застосовувати їх разом.
На ілюстрації нижче можна наочно ознайомитися з особливостями інструментів:
Висновок такий: CSS Grid Layout - нова і потужна система компонування, що дозволяє з легкістю розділити веб-сторінку на стовпці і рядки.
Корисні ресурси, уроки і керівництва
Останнім часом, у зв'язку з включенням підтримки Grid в популярні браузери, з'явилася величезна кількість відмінних уроків і вступних посібників по інструменту. Ми уважно стежили за які виходили і виходять оновленнями і тепер раді представити список ресурсів, які допоможуть вам почати працювати і експериментувати з CSS Grid.
Основні поняття в контексті CSS Grid
На цьому ресурсі ви знайдете введення в роботу з Grid, пояснення механізму роботи Grid-контейнера, опис розміщення елементів всередині контейнерів і багато іншого.
Детальний керівництво по CSS Grid
Детальний керівництво. покриває всі деталі останньої версії Grid. Кріс Хаус розглядає всі потрібні вам властивості і оглядає високорівневі концепти. Крім того, він підкріплює це зразками коду та візуальними прикладами.
Grid в прикладах
Якщо ви до цих пір не вибрали між Flexbox і Grid, то відвідайте ще один сайт Рейчел, де вона розповідає про ключові відмінності цих інструментів.
Робочий приклад: мій перший макет, створений з CSS Grid
У цьому прикладі Тайлер Стіка показує старий спосіб побудови макетів (за допомогою float) і намагається досягти того ж результату за допомогою Grid.
Особливості CSS Grid, які змушують моє серце битися швидше
Фронтенд розробник Уна Кравець розповідає про трьох функціях Grid, захоплюють її: включення елемента minmax (). використання grid-gap і названі області.
Практичне використання CSS Grid: додавання Grid в існуючий проект
Ерік Мейер розглядає процес перетворення існуючих CSS напрацювань в Grid без порушення їх працездатності в браузерах без підтримки Grid.
Grid-город
Grid Garden - невелика і кумедна браузерна гра. заснована на написанні коду для вирощування моркви в городі. Це чудовий спосіб для практики і вивчення основ CSS.
Мета моєї гри не включає в себе охоплення всіх нових аспектів інструменту CSS Grid. Головне призначення гри - допомогти гравцям розвинути інтуїцію і визнати потенціал інструменту.
Каже Томас Парк.
Шпаргалка по CSS Grid
Відмінна пісочниця з якісним візуальним оформленням, яка допоможе розібратися з термінологією, властивостями і з тим, як Grid працює в браузері.
висновок
Дані з скріншоту з сайту Can I Use виглядають досить багатообіцяюче, показуючи, що більшість сучасних браузерів готові до роботи з CSS Grid і можуть підтримувати його властивості без префіксів:
Однак компанія Microsoft знову розчарувала: на даний момент в браузерах IE і Edge присутній тільки часткова підтримка Grid через префікс -ms-. Зараз в Microsoft відправлена заявка на розвиток підтримки Grid, і вона знаходиться в топі за кількістю заявників.
Незважаючи на те, що більшість браузерів підтримує Grid, він працює тільки в останніх версіях цих браузерів (а в деяких лише частково), що становить лише 30-40% від загального числа використовуваних браузерів. Якщо ви не впевнені, що переважна більшість ваших користувачів має останні збірки браузерів з підтримкою Grid, то бажано не експериментувати зі створенням великомасштабних проектів.