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

• Здоров'я
• Мана/енергія
• Вхідне лікування
• Модуль аггро (ступінь загрози)
• Бафи / дебафи
• Відстань
• Підтримка петів та транспортних засобів

Цікаво реалізовано саму подачу інформації залежно від поточного стану.
Для її показу можна використовувати:

• Текст у центрі.
• Значок у центрі.
• Рамку кадру кожного гравця.
• Прозорість кадру.
• Кольорові квадратики по чотирьох кутах.

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

Налаштування аддону Gridчерез іконку на міні карті або використовуйте команду для чату /grid

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

Багато хто, вперше встановивши цей аддон і побачивши якісь незрозумілі сірі квадратики з крапками по кутах, плюються і одразу зносять його назад. Але при належному налаштуванні може набути будь-якого виду на ваш смак і має при цьому величезні можливості.
На жаль, у мережі не так багато впорядкованої інформації з налаштування. Існуючі посібники в картинках можуть допомогти лише сліпо скопіювати галочки на скрін, але не всі при цьому розуміють, що саме вони роблять. Сподіваюся, я зможу тут доступно і докладно викласти, як зробити Грід функціональнішим, та розповісти, які налаштування за що відповідають.
У цьому гайді багатобукф і мінімум ілюстрацій, так що персонам, що стомлюються від читання, можна відразу залишити топік:)
Доповнення Грида

Грід – модульний аддон, для нього існує безліч доповнень, що надають йому розширених можливостей. Перелічу найважливіші, як на мене, модулі. Вони сильно збільшують функціональність і зручність використання Грида, тому рекомендую всім також обов'язково поставити їх.

. Доповнення з розряду must have- додає до кадрів смужки мани/енергії/люті. Цього дуже не вистачає у звичайному Гриді.

. Додає відомі дебаффи для популярних рейдових інстансів БК та ВОТЛК.

. Дуже зручна заміна стандартної індикації Грида. Дозволяє показувати в кожному кутку по дві іконки станів персонажа (баффи, дебаффи, брак життя або мани та інше), причому іконки є не просто квадратиком певного кольору, як у звичайному Гриді, а повноцінною зменшеною іконкою накладеного баффа/дебаффа. Існує також аддон – тут можна поставити у кожний кут вже по 3 іконки. Але дивіться самі, щоб не було надлишку інформації, в якій ви не зможете розібратися.

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

. Додає встановлені види кадру для різних ситуацій: якщо ви гойдаєтеся соло, якщо ви в групі з 5 осіб, у рейді з 10, 25 або 40 осіб, на полі бою або арені. Для всіх цих випадків можна також вибрати, чи повинен Грид показувати вихованців. Наприклад, якщо ви входите в героїчний Наксрамас, Грід у вас відразу перейде у вигляд для 25 осіб, а якщо у звичайний - для 10 осіб.

Раніше в обов'язковому порядку було ще потрібне доповнення GridStatusIncomigHeals, що показує лікування, що входить у персонажа, але зараз цей модуль застарів і Грід сам вміє показувати вхідний кіл і рес (інші бачать їх за наявності у вас потрібних бібліотек - LibHealComm-3.0 і LibResComm-. Та ж ситуація з GridStatusReadyCheck (перевірка рейду на готовність), автор настійно рекомендує прибрати це доповнення, якщо воно встановлено, оскільки воно тепер входить до складу ядра Грида.
Конфігурація

Щоб увімкнути налаштування Грида, потрібно натиснути на іконку у мінікарти або надрукувати в чаті команду /grid config.
Грид має три основні розділи налаштувань Розташування, Статусі Фрейми.

Коротко опишу основне призначення та можливості цих розділів.

Розташування.Тут налаштовується загальний вигляд Грида, регулюється розмір, колір та прозорість "підкладки" загального кадру, відстань між кадрами та масштаб всієї цієї справи.

Статус.У цьому розділі є всі можливі статуси гравця, в яких він може перебувати. Що таке статус? Це, наприклад, ім'я гравця, баффи та дебафи, здоров'я, мана, засіб пересування, готовність, відстань до гравця і т.д., загалом, все, що може бути відображене на його кадрі та має значення. Для кожного статусу можна призначити його колір та пріоритет. Колір буде використовуватися для відображення цього статусу на кадрі, а пріоритет визначає, чи перекриє цей статус інший, якщо вони відображаються в тому самому місці.
У налаштуваннях кожного статусу є також очевидні галочки, що дозволяють показувати лише накладені вами статуси, контролювати радіус накладання статусу та його тривалість тощо.
Особливо слід зазначити підрозділ Статус ->Аури, де можна додати нові баффи та дебаффи, невідомі Гриду, які ви хочете відстежувати.

кадри.У цьому розділі вказується, де потрібно показувати описані вище статуси. Є стандартні "знайома", це кути кадру гравця, значок в центрі, текст в центрі, межа кадру, колір смуги життя, колір смуги мани і т.д. Різні модулі для Грида можуть додавати додаткові індикатори. На кожен із цих індикаторів можна призначити один або кілька статусів. Наприклад, в одному кутку показувати хвороби та отрути, в іншому різні щити, в третьому хоти, в центрі - дебафи рейду, а на смузі життя показувати низьку хп або, наприклад, ту ж отруту (при отриманні статусу смуга життя забарвиться у колір, обраний для цього стану у розділі "Статус").
Особливе значення має підрозділ Фрейми ->Додатково, саме він максимально відповідає за зовнішній вигляд Грида Тут можна включити додаткові індикатори, а головне - налаштувати довжину та ширину кадрів гравців, горизонтальне або вертикальне їх відображення, розмір та тип шрифту для написів, вибрати текстуру кадрів та розміри іконок для статусів. Також тут налаштовується розмір та розташування смуги мани з модуля GridManaBars, параметри іконок з модуля GridIndicatorCornerIconsта інші модулі. Саме тут можна "перетворити Grid на HealBot".

Отже, грубо кажучи, у розділі Статусналаштовується ВИГЛЯД різних баффів/дебафів на фреймах Грида, а в розділі Фрейми- РОЗМІЩЕННЯ цих баффів/дебаффів на фреймах Грида.

Налаштування

Тут я опишу налаштування Грида на прикладі своєї конфігурації, припускаючи, що встановлені всі вищезазначені доповнення. Може комусь подобається стандартний вигляд Грида та влаштовують стандартні можливості, Але на смак і колір ... Мені більше імпонують горизонтальні довгі зелені панельки, як наочніше вони здаються.
Потрібно врахувати, що у мене широкоформатний 22-дюймовий екран з роздільною здатністю 1680х1050, тому власникам моніторів з відмінною роздільною здатністю можливо доведеться змінити параметри під своє розташування Грида.

Налаштування спільного зовнішнього виглядуГріда

Ідемо до основного розділу закладки Розташування. Тут є група повзунків, що регулює розмір "підкладки" загального кадру, відстань між кадрами гравців і масштаб цієї справи. У мене ці значення встановлені у положенні 1, 6 та 1 відповідно. Нижче можна встановити колір фону та колір кордону. Я зробила фон сірим та прозорим на 90%, а кордон прибрала зовсім, у підрозділі Розташування ->Додатковопоставивши None у списку текстур кордону).
В розділі Фреймивиставляємо довжину тексту в центрі на величину більше, ніж стандартні один-три символи, так, щоб було нормально видно ім'я персонажа, і встановлюємо бажану прозорість для смуги лікування. Також ставимо галочку "Звернути колір смуг".
Далі йдемо в підрозділ Фрейми -> Додатково. Велике поле для діяльності!
Дивимося відразу в середину сторінки налаштувань і бачимо два великі списки: Орієнтація текстуі Орієнтація кадрів. Ставимо в обох випадках "ГОРИЗОНТАЛЬНО". Вище розташований бігунок Висота кадрів, пояснювати, гадаю, немає необхідності. У мене цей параметр складає 22 одиниці. Нижче наведено параметр Розмір кутіввідповідає за величину класичних квадратиків по кутах кадру - 7 одиниць. Далі – розмір шрифту для написів у центрі. У мене він виставлений на 10, можна і більше, але тоді міститься менше літер від статусу. І наостанок, Ширина кадрів. Виставляємо зручне для вас значення, для мене це 90.

У підрозділі Фрейми -> Додатково -> Смуга манивибираємо положення смуги мани знизу (або зверху за бажанням) та налаштовуємо її ширину. У моєму випадку це 25.
Ідемо до підрозділу Заголовок -> Здоров'я -> Здоров'я одиниці. Виставляємо колір та прозорість за смаком, для мене це, наприклад, зелений, 90%. За бажанням можна встановити галочку "Використовувати колір класів", тоді кольори всіх смужок будуть відповідати стандартним кольорам класів (які також можна змінити в підрозділі кольорирозділу Фрейми).
Ось наш кадр і набув більш-менш відповідного вигляду - приблизно такий:

Налаштування статусів
Ідемо до розділу Статус.

Для початку потрібно додати відсутні у Гриді баффи та дебаффи, які ви хочете бачити на фреймах. Для цього йдемо в розділ Статус -> Ауриі пишемо назву потрібного баффа або дебаффа у відповідному рядку, після чого тиснемо Enter. В аурах з'являється новий розділз ім'ям доданого бафа або дебафа, в якому можна налаштувати його вигляд.
Сильно допомагає модуль GridStatusRaidDebuffщо робить за нас брудну роботу з додавання безлічі рейдових дебаффів. Ці дебафи знаходяться в окремому підрозділі Статус -> Дебаффи рейду.
Я для себе додала, наприклад, Щит Землі, Божественний захист, Крижаний вибух(Скілл Кель"Тузада, мені потрібно було виділити його серед усіх інших рейдових дебаффів, які є в модулі GridStatusRaidDebuff, і встановити на інший індикатор) та деякі інші.
Виставляємо кольори та інші параметри для всіх цікавих для нас статусів. Наприклад, отруйно-зелений для отрути, фіолетовий для магічних ефектів, коричневий для хвороб тощо.
За бажання можна налаштувати зміну кольору смуги здоров'я, якщо у персонажа мало ХП. Для цього йдемо в підрозділ Статус -> Здоров'ята виставляємо значення "Поріг здоров'я" у підрозділі Дефіцит здоров'яприблизно на 66-90% (як зручніше), а значення "поріг здоров'я" в розділі Попередження Мало HPприблизно 33%. У першому випадку ставимо жовтий або помаранчевий колір, у другому - червоний, що попереджає. Не забуваймо виставити пріоритети. Тепер, якщо персонажа трохи поб'ють, його смуга життя стане помаранчевою, а коли в нього залишиться лише третина, вона набуде червоного кольору.
В розділі Статус -> Відстаньвизначаємо кольори для персонажів навколо нас у різних радіусах. Наприклад, можна ставити дедалі прозоріший зелений колір у міру видалення персонажа. Тоді у фреймі буде завжди видно, хто знаходиться ближче за 10 метрів від нас, часом це буває дуже важливо (наприклад, на енкаунтерах, де не можна стояти близько один від одного), а також дозволить визначити, кого не варто і намагатися лікувати через відстань.
В розділі Заголовок - > Ім'я одиниціможна встановити колір, яким написано ім'я на кадрі, або використовувати колір класу.
Решта статусів налаштуйте за своїм смаком та потребами, призначаючи для них кольори та пріоритети.

Налаштування індикаторів

Тепер потрібно налаштувати розміри, розташування та вигляд іконок та написів. Це робиться у розділі Фрейми.
У підрозділі Фрейми -> Додаткововключаємо галочкою другий текстовий індикатор у центрі. Включаємо також індикатор "Колір смуги здоров'я" (саме він показуватиме нам алерт-кольори для низького порога здоров'я, налаштовані вище).
Два повзунки нижче відповідають за іконку в центрі кадру гравця, її розмір та товщину кордону. Наступні дві галочки відповідають за центральний значок. Перша - "Увімкнено Текст множини значків". Кривий переклад, суть така: якщо ця опція увімкнена, ми бачимо на іконці цифру, що показує скільки стаків баффів/дебаффів висить на даному персонажі. Наприклад, скільки зарядів Щита Землі чи скільки марок всдаников із Наксрамаса. Друга - "Включено кадр перерви (cooldown) значка". Як ви вже, напевно, здогадайтеся, відповідає за відображення кулдауна скила на центральному значку.

Значки по кутах із модуля GridIndicatorCornerIconsналаштовуються у підрозділі Фрейми -> Додатково -> Icon (Corners). Розмір всіх значків у мене по 10, зсув по осі Х -2, а по осі Y - +2. Можна погратися розмірами та розташуванням іконок.

Налаштування відображення статусів

Всі потрібні індикатори включені, тепер переходимо до головного – потрібно призначити на них показ тих статусів, що були налаштовані вище.
Вибираємо по черзі підрозділи із закладки Фреймиі відзначаємо галочками статуси, які мають відображатися на даному індикаторі. Їхній вигляд ми вже налаштували вище в розділі Статуси. Можна вибирати кілька статусів на одне знайоме місце, тут і починає працювати шкала пріоритетів. Якщо гравець одночасно отримує всі призначені на це місце бафи/дебаффи, то показаний з них буде той, який має максимальний пріоритет. Рекомендується для економії місця також призначати на один індикатор статуси, які не перетинаються і не бувають отримані одночасно. Наприклад, можна поєднати в одному значку стан привиду та рейдовий дефафф - ясна річ, що в стані смерті гравець не має дебаффів, а якщо на ньому дебаффи, то він не привид.

Налаштування Grid

Якби Grid був просто колекцією рядків і стовпчиків пропорційних розмірів, від нього було б мало толку. На щастя, він не такий. Щоб відкрити повний потенціал Grid, можна змінювати способи встановлення розмірів кожного рядка та колонки. Елемент Grid підтримує такі стратегії зміни розмірів:

Абсолютні розміри

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

Автоматичні розміри

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

Пропорційні розміри

Простір поділяється між групою рядків та колонок. Це стандартне встановленнядля всіх рядків та колонок.

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

Режим зміни розмірів встановлюється за допомогою властивості Width об'єкта ColumnDefinition або властивості Height об'єкта RowDefinition, присвоюючи йому кілька чи рядок. Наприклад:

Цей синтаксис прийшов зі світу Інтернету, де він застосовується на сторінках HTMLз кадрами. Якщо ви використовуєте суміш пропорційної установки розмірів з іншими режимами, пропорційно змінний рядокабо колонка отримає весь простір, що залишився.

Щоб розділити простір, що залишився нерівними частинами, можна призначити вагу (weight), який повинен вказуватися перед зірочкою. Наприклад, якщо є два рядки пропорційного розміру, і потрібно, щоб висота першої дорівнювала половині висоти другої, необхідно розділити простір, що залишився наступним чином:

Це повідомить Grid про те, що висота другого рядка повинна бути вдвічі більша за висоту першого рядка. Для розділення додаткового простору можна вказувати будь-які числа.

Легко організувати програмну взаємодію між об'єктами ColumnDefinition та RowDefinition. Потрібно просто знати, що властивості Width та Height – це об'єкти типу GridLength. Щоб створити GridLength, який представляє певний розмір, просто передайте відповідне значення конструктору GridLength. Для створення об'єкта GridLength, що представляє пропорційний розмір (*), необхідно передати число конструктору GridLength і значення GridUnitType.Start як другий аргумент конструктора. Для позначення автоматичної змінирозміру використовується статична властивість GridLength.Auto.

Нижче наведено приклад компонування Grid з використанням автоматичних і пропорційних розмірів:

OK Cancel

Всім привіт. Лютий-Березень 2017 року запам'яталися для багатьох, хто працює з HTML та CSS тим, що більшість браузерів випустили оновлення, серед яких були й оновлення для CSS. Тепер можна використовувати специфікацію CSS Grid Layout без прапорів у наступних браузерах: Firefox 52, Chrome 57, Opera 44, Safari 10.1. Який із браузерів залишився позаду, гадаю, ви здогадуєтеся. Точніше він підтримує стару версію специфікації. Але розробники цього браузера роблять все можливе, щоб запровадити нову специфікацію. Впровадження підтримки нової CSS Grid Layout специфікації - це найважливіша подія за минулі п'ять років. Ця специфікація змінить повністю підхід до розробки інтерфейсів користувача. І це круто.

Я використовую Flexible Box Layout

Багато хто запитує: «Стоп, я використовую flexbox, навіщо мені ще якісь grid'и?». Питання більш ніж доречне. CSS Grid не замінить Flexbox і навпаки. Перша відмінність - це те, що Flexbox працює лише в одному вимірі. З цього випливає, що ми можемо розміщувати flex елементи лише по головній осі або по поперечній осі. Ми не можемо розмістити flex елементи відразу на кількох осях. CSS Grid у свою чергу нам дозволяє працювати з розміткою у двомірному просторі та вирівнювати вміст в обох вимірах. Мені подобається як пояснює цю різницю Tab Atkins.

Одна з найбільших проблем при розробці інтерфейсів - це те, що при зміні дизайну, функціоналу або поведінки будь-якого блоку доводиться змінювати його розмітку (у більшості випадків). CSS Grid дозволяє змінювати розташування grid елементів, не змінюючи сам HTML. Нижче приклад простої розмітки на Flexbox та CSS Grid.

Основні терміни

Перш ніж розпочинати роботу з CSS Grid, потрібно розібратися з основними термінами. На основі цих термінів побудовано всю специфікацію.

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

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

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

Grid cell- це найменша неподільна одиниця grid контейнера, на яку можна посилатися при позиціонуванні grid елементів. Утворюється на перетині grid рядки та grid колонки.

Grid area- це простір усередині grid контейнера, який може бути поміщений один або більше grid елементів. Цей елемент може складатися з одного або кількох grid осередків.

Кожен елемент тісно пов'язаний один з одним та відповідає за певну частину grid контейнера.

Перший CSS Grid макет

Ми розібралися із основними термінами. Настав час зробити наш перший grid макет. Нічого складного, простенький макет три рядки на три стовпчики, щоб розібратися з основами. Нижче ви можете побачити приклад.
У першому варіанті з прикладу ми створюємо три колонки розміром 150px 1fr 150px і три рядки розміром 50px auto 50px відповідно. Зверніть увагу на такі значення: 1fr, auto. Давайте розберемося, що за значення.

1fr - це спеціальна одиниця виміру, введена в даній специфікації. Вона вимірюється у якихось конкретних одиницях виміру (px , em , rem , ін.) З цього випливає, що ми можемо використовувати її разом із функцією calc() . Ця одиниця виміру може бути менше одиниці, і навіть може приймати негативні значення. Вона розраховується після того, як всі інші значення, відмінні від fr були розраховані.

Auto - поводиться досить цікаво і використовує для розрахунку розмірів хитрий алгоритм. У деяких ситуаціях може здатися, що ця одиниця виміру працює так само, як і fr . Але це не так. Головна відмінність, auto буде розрахований до того, як буде розрахований fr. Про це слід пам'ятати. Ви можете побачити цю поведінку з другого та третього варіантів прикладу, наведеного вище.

Для розмітки колонок та рядків використовуються такі правила:

Grid-template-columns: 150px 1fr auto; grid-template-rows: 50px auto 50px;
Скорочена форма запису виглядає так:

Grid-template: 50px auto 50px / 150px 1fr auto;

Типовий шаблон на grid'ах

Давайте зробимо простенький шаблон, з яким ми всі знайомі. Нічого складного, шаблон складатиметься з наступних тегів: header, nav, aside, article, footer. Переважна більшість інтернет ресурсів використовує цей шаблон. Тільки знаєте, навіть у такому простому шаблоніспостерігається наступна проблема: Я дизайнер, я так хочу. Я розробник, так не можу». З появою CSS Grid Layout подібна проблема має прагнути нуля.
У даному прикладіми знайомимося ще з кількома властивостями CSS Grid Layout. Перше grid-template-areas. Воно використовується для створення іменованих областей grid контейнера, які не пов'язані з будь-яким конкретним grid елементом. Синтаксис дуже зручний, ми відразу бачимо, який шаблон вийде на виході. Друга властивість grid-area. Воно використовується для дочірнього елемента grid контейнер. Вказує в яку іменовану область помістити grid елемент.

Давайте розглянемо перший варіант grid-template-areas:

Grid-template-areas: "header header" "nav main" "footer ."
Один або більше символів, що йдуть поспіль. (Точка) мають особливе значення. Якщо цей символ використовується, то браузер його відрендерить як нульовий токен, що в свою чергу означає наступне: на його місці не буде створена іменована область контейнера grid і в неї не можна помістити елемент grid.

Якщо ми не вказали властивість grid-area для якогось дочірнього grid елемента, браузер автоматично розподілить такі елементи. Таку поведінку можна побачити з останнього варіанту, наведений приклад вище.

Приклади:

minmax() - функція

Дозволяє задавати мінімальне та максимальне значення для ряду/колонки. Використовується у властивостях, де потрібно задавати розмір: grid-template-rows: , grid-template-columns: , grid-template: .

Minmax (мін_значення, макс_значення)

Значення може бути:

• px, em, rem, ...- одиниці довжини (100px)
• % - Відсотки (10%)

fr- Гнучкі розміри. Може використовуватись лише для макс. значення.

max-content- найменший можливий розмір комірки, у якому вміст вільно у ній вміщується. Наприклад, якщо в комірці текст, ідеальною шириною комірки буде вся довжина тексту (в один рядок без перенесення).

min-content- Найменший розмір, при якому осередок не переповнюється. Наприклад, якщо в комірці текст, то ширина дорівнюватиме найдовшому слову в тексті.

auto- залежить від того, використовується воно як максимальне або мінімальне значення функції minmax() :

• якщо як максимум, то теж саме що max-content .
• якщо як мінімум, то значення буде мінімальним можливим розміром для комірки. Такий розмір відрізняється від min-content і визначається властивостями min-width або min-height .

Приклади:

Варіанти використання:

Grid-template-columns: minmax(100px, 200px) 1fr 1fr; grid-template-columns: minmax(200px, 50%) 1fr 1fr; grid-template-columns: minmax(200px, 1fr) 1fr 1fr; grid-template-columns: minmax(min-content, max-content) 1fr 1fr; grid-template-columns: minmax(auto, auto) 1fr 1fr; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

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

grid-row-gap: grid-column-gap: grid-gap:

grid-row-gap: розрив між рядами.
grid-column-gap: задає розрив між колонками.
grid-gap: задає розрив для рядів і колонок разом. Це скорочення для двох попередніх властивостей. Якщо вказати один параметр, він буде виставлений для обох значень.

//Синтаксис: grid-row-gap: розмір; grid-column-gap: розмір; grid-gap: розмір; /* row column */ grid-gap: розмір;

Приклади:

grid-column-gap: 10px; grid-row-gap: 15px;

Примітка: префікс grid- буде видалено та назви властивостей стануть: column-gap: і row-gap: . Chrome 68+, Safari 11.2 та Opera 54+ вже підтримують властивості без цього префікса.

align-content: justify-content: place-content:

Вирівнює ряди/колонки. Вирівнюються осередки сітки, не елементи всередині осередків. Щоб вирівняти елементи, використовуйте: justify-items, align-items, place-items.

// синтаксис: align-content: значення; // вирівнює ряди по вертикалі justify-content: значення; // вирівнює колонки по горизонталі ←→ place-content: значення; // скорочений запис: встановить обидва значення place-content: align-content justify-content; // скорочений запис

Значення може бути:

• stretch (default)- Розтягує ряди/колонки (комірки) повністю. Весь простір контейнера заповнюється. Має сенс тільки якщо у рядів/колонок розмір не заданий жорстко (вони гумові). Якщо вони не гумові, то працює як start.
• start- ряди/колонки упаковані впритул до початкового краю контейнера.
• end- ряди/колонки упаковані впритул один до одного до кінцевого краю контейнера.

• center- ряди/колонки упаковані впритул один до одного і знаходяться посередині контейнера.

• space-around - вільний простіррівномірно розподіляється між рядами/колонками та додається по краях. Виходить, що крайні ряд/колонка не притискаються до країв контейнера, але відстань до краю вдвічі менша, ніж між рядами/колонками.
• space-evenly- теж що й space-around, тільки відстань до країв контейнера така ж як і між рядами/колонками.
• space-between- крайній ряд/колонка притискається до країв контейнера і вільне місце рівномірно розподіляється між рядами/колонками.

Рідкісні значення:

Приклади:

Повний синтаксис:

// синтаксис: align-content: normal | | ? | justify-content: normal | | ? [ | left | right] // = space-between | space-around | space-evenly | stretch // = unsafe | safe // Центр | start | end | flex-start flex-end // = [First | last]? baseline // те що чи до? - Можна не вказувати

• left- для justify-content, не працює для align-content. Колонки упаковані впритул один до одного до лівого краю контейнера.

right- для justify-content, не працює для align-content. Колонки упаковані впритул до правого краю контейнера.

flex-start

flex-end

• baseline, first baseline, last baseline

Усі варіанти значень:

// базове вирівнювання align-content: center; align-content: start; align-content: end; align-content: flex-start; align-content: flex-end; align-content: normal; // вирівнювання лінією тексту align-content: baseline; align-content: first baseline; align-content: last baseline; // Розподіл align-content: space-between; align-content: space-around; align-content: space-evenly; align-content: stretch; // коли елемент перекриває контейнер align-content: safe center; align-content: unsafe center; // глобально align-content: inherit; align-content: initial; align-content: unset;

justify-content:

//Базове вирівнювання justify-content: center; justify-content: start; justify-content: end; justify-content: flex-start; justify-content: flex-end; justify-content: left; justify-content: right; align-content: normal; // вирівнювання лінією тексту немає сенсу // розподіл justify-content: space-between; justify-content: space-around; justify-content: space-evenly; justify-content: stretch; // коли елемент перекриває контейнер justify-content: safe center; justify-content: unsafe center; // глобально justify-content: inherit; justify-content: initial; justify-content: unset;

// базове вирівнювання // align-content може бути left чи right place-content: center start; place-content: start center; place-content: end left; place-content: flex-start center; place-content: flex-end center; // вирівнювання лінією тексту // для другого параметра (justify-content) немає сенсу place-content: baseline center; place-content: перша baseline space-evenly; place-content: last baseline right; // розподіл place-content: space-between space-evenly; place-content: space-around space-evenly; place-content: space-evenly stretch; place-content: stretch space-evenly; // глобально place-content: inherit; place-content: initial; place-content: unset;

align-items: justify-items: place-items:

Вирівнює елементи сітки - те що знаходиться всередині сітки. Спрацьовує для всіх елементів grid. Щоб вирівняти самі осередки (ряди колонки), використовуйте: justify-content, align-content, place-content.

// синтаксис: align-items: значення; // вирівнює елементи по вертикалі justify-items: значення; // вирівнює елементи по горизонталі ←→ place-items: значення; // скорочений запис: встановить обидва значення place-items: align-items justify-items; // скорочений запис

Значення може бути:

auto (default)- вказує на використання значення justify-items: , яке задається для контейнера. Якщо елемент позиціонований через absolute, застосовується normal.

• stretch- Розтягує всі елементи на всю ширину / висоту осередків.
• start- Розміщує всі елементи на початку осередків (ліворуч або зверху).
• end- Розміщує всі елементи в кінці осередків (справа або внизу).
• center- Розміщує всі елементи по центру осередків.

Рідкісні значення:

Приклади:

Повний синтаксис:

Вище для спрощення не був повний синтаксис, проте він покриває 99% потрібного.

// синтаксис: align-items: normal | stretch | [ ? ] | justify-items: normal | stretch | ? [ | left | right] | | legacy [ left | right | center] // = [First | last]? baseline // = unsafe | safe // Центр | start | end | self-start | self-end | flex-start flex-end // те що чи до? - Можна не вказувати

• left- для justify-items , не працює для align-items . Усі елементи притискаються до лівого краю осередків.

right- для justify-items , не працює для align-items . Усі елементи притискаються до правого краю осередків.

flex-start- теж що start для грід-сітки. Тобто. якщо елементи не є дітьми flex контейнера поводиться як start.

flex-end- теж що end для грід-сітки. Тобто. якщо елементи не є дітьми flex контейнер поводиться як end .

baseline, first baseline, last baseline- Вирівнює по лінії тексту (першої чи останньої). Зворотна сумісність: для first baseline це start, для last baseline це end.

• legacy- дозволяє керувати тим, як успадковуватиметься значення дітьми.
  Якщо legacy вказано без left, right, center, то значення просто успадковується у батька або одно normal.
  Коли justify-self:auto посилається значення justify-items: , береться значення без слова legacy , наприклад у legacy left буде взято left . Це потрібно для правильного вирівнювання тега або елемента з атрибутом align.

Усі варіанти значень:

// базові значення align-items: normal; align-items: stretch; // вирівнювання позиції // align-items може бути left чи right align-items: center; align-items: start; align-items: end; align-items: flex-start; align-items: flex-end; align-items: self-start; align-items: self-end; // Вирівнювання по лінії тексту align-items: baseline; align-items: first baseline; align-items: last baseline; // коли елемент перекриває контейнер align-items: safe center; align-items: unsafe center; // глобально align-items: inherit; align-items: initial; align-items: unset;

// Базові значення justify-items: auto; justify-items: normal; justify-items: stretch; // Вирівнювання позиції justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; // Вирівнювання по лінії тексту justify-items: baseline; justify-items: first baseline; justify-items: last baseline; // коли елемент перекриває контейнер justify-items: safe center; justify-items: unsafe center; // Вирівнювання з пріоритетом запозичення значення у батька justify-items: legacy right; justify-items: legacy left; justify-items: legacy center; // глобально justify-items: inherit; justify-items: initial; justify-items: unset;

// базові значення place-items: auto center; place-items: normal start; // Вирівнювання позиції place-items: center normal; place-items: start auto; place-items: end normal; place-items: self-start auto; place-items: self-end normal; place-items: flex-start auto; place-items: flex-end normal; place-items: left auto; place-items: right normal; // Вирівнювання по лінії тексту place-items: baseline normal; place-items: first baseline auto; place-items: last baseline normal; place-items: stretch auto; // глобально place-items: inherit; place-items: initial; place-items: unset;

grid-auto-rows: grid-auto-columns:

Встановлює розмір для авто-створюваних (неявних) рядів/колонок.

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

//Синтаксис: grid-auto-columns: розмір; grid-auto-rows: розмір;

Можливі значення розмірів дивіться в описі і може бути px, em, %, fr і т.д.

Приклади:

Щоб зрозуміти як створюються авто-осередки сітки, давайте уявимо, що у нас є сітка 2x2 - 2 ряди і 2 колонки:

Grid-template-columns: 60px 60px; grid-template-rows: 90px 90px

Тепер, спробуємо розмістити елементи в сітку, вказавши їм позиції через властивості:

Item-a ( grid-column: 1; grid-row: 2; ) .item-b ( grid-column: 5; grid-row: 2; )

Елемент.item-b ми попросили розміститися в неіснуючій колонці 5. У нас тільки 2 колонки, тому сітка автоматично розшириться і їй будуть додані ще 3 колонки з шириною auto. Поточні властивості дозволяють задати розміри для таких неявних колонок:

Grid-auto-columns: 60px;

Цікавий момент для неявних колонок рядів і repeat() :

grid-auto-flow:

Дозволяє змінити логіку розміщення елементів у порожні комірки. За замовчуванням алгоритм такий → ↓ → можна зробити так ↓ → ↓.

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

// Синтаксис: grid-auto-flow: row | column | row dense | column dense

row (default)- Розставляє елементи в сітці по рядах → ↓ → . Додає ряди, якщо в сітці немає місця.

column- Розставляє елементи в сітці по колонках ↓ → ↓ . Додає колонки, якщо в сітці немає місця.

• dense- Включає «dense» алгоритм заповнення, який намагається розмістити елементи так, щоб не залишалося порожніх просторів (за замовчуванням працює алгоритм «sparse»). При цьому елементи можуть розташовуватися не по порядку. При вставці кожного наступного елемента, алгоритм перевіряє чи немає порожньої комірки ззаду куди може поміститися поточний елемент, якщо є, поміщає його туди, а не в наступну комірку. dense має сенс лише за наявності областей у сітці - це коли елементу вказано розміститися відразу у кілька осередків (через span), тоді він зазвичай поміщається у одну осередок і залишається порожнє місце.

Приклади:

Допустимо у нас є такий HTML:

Тепер ми створили сітку з 5-ма колонками і двома рядами і два елементи розташували в конкретні осередки:

Grid ( display: grid; grid-template: 60px 60px 60px 60px 60px / 30px 30px; /* за замовчуванням: grid-auto-flow: row; */ )

Тепер встановимо grid-auto-flow: column:

grid:

Дозволяє скорочено записати властивості:

• grid-template-rows:
• grid-template-columns:
• grid-template-areas:
• grid-auto-rows:
• grid-auto-columns:
• grid-auto-flow:

Тобто. у цій властивості можна описати майже всі властивості грід-сітки. Однак, тут можна описати властивості тільки для «явних» або «неявних» рядів/колонок, одразу для тих та інших не вийде. Якщо потрібно вказати властивості тих і інших, потрібно дописувати відповідні властивості на додаток grid: .

// синтаксис: grid: none grid: grid-template grid: grid-template-rows / grid-template-columns grid: grid-template-areas grid: grid-template-rows / grid-auto-columns? grid: grid-auto-rows? / grid-template-columns // те що чи до? - Можна не вказувати

none- Встановлює всі властивості в початковий стан.

grid-template-rows/grid-auto-columns? - ключове слово auto-flow з правого боку слеша встановлює grid-auto-flow: column . dense включає алгоритм упакування «dense». Якщо не вказано grid-auto-columns , то він дорівнюватиме auto .

• grid-auto-rows? / grid-template-columns- ключове слово auto-flow з лівого боку слеша встановлює grid-auto-flow: row. dense включає алгоритм упакування «dense». Якщо не вказано grid-auto-rows , то він дорівнюватиме auto .

Приклади:

grid: "header header header header" "main main main right right" "footer footer footer footer"; // теж що: grid-template-areas: "header header header header" "main main main right right" "footer footer footer footer"; grid: 100px 300px / 3fr 1fr; // Теж що: grid-auto-flow: row; grid-template-columns: 200px 1fr; grid: auto-flow dense 100px/1fr 2fr; // теж що: grid-auto-flow: row dense; grid-auto-rows: 100px; grid-template-columns: 1fr 2fr; grid: 100px 300px/auto-flow 200px; // теж що: grid-template-rows: 100px 300px; grid-auto-flow: column; grid-auto-columns: 200px;

Також можна вказати складніший, але зручний для налаштування все і відразу:

Grid: "header header header" 1fr "footer footer footer" 25px/auto 50px auto; // теж що: grid-template-areas: "header header header" "footer footer footer"; grid-template-rows: 1fr 25px; grid-template-columns: auto 50px auto;

І ще варіанти:

Grid: repeat(auto-fill, 5em) / auto-flow 1fr; grid: auto-flow 1fr/repeat(auto-fill, 5em); grid: auto 1fr auto/repeat(5, 1fr); grid: repeat(3, auto)/repeat(4, auto);

Для елементів

CSS властивості: float, display:inline-block, display:table-cell, vertical-align і column-* ніяк не впливають на елементи grid контейнера. У grid сітки свої правила...

Grid-row-start: grid-row-end: grid-column-start: grid-column-end: grid-row: grid-column:

Вказує положення елемента у сітці. Тобто. розміщує елемент у вказану комірку. Вказувати потрібно ім'я або номер лінії, до якої належить комірка і до якої потрібно прикріпити елемент.

grid-column та grid-row - це скорочення для властивостей: grid-column-start/grid-column-end та grid-row-start / grid-row-end . Можна вказати лише перше (одне) значення, воно ставитиметься до початкової лінії і елемент буде розтягуватися на 1 ряд/колонку (тобто буде поміщений в одну комірку початкова лінія якої вказана).

//Синтаксис: grid-row-start: значення; // де починається лінія низки grid-row-end: значення; // де закінчується лінія низки grid-column-start: значення; // Де починається лінія колонки grid-column-end: значення; // де закінчується лінія колонки grid-row: grid-row-start/grid-row-end; grid-column: grid-column-start/grid-column-end; // можна вказати одне значення, друге значення буде 1 grid-row: grid-row-start; grid-column: grid-column-start;

Значення може бути:

Приклади:

.item-a ( grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start grid-row-end: 3 )
.item-b ( grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2 grid-row-end: span 2 )

Якщо не встановлено властивості grid-column-end/grid-row-end, елемент за замовчуванням буде розтягуватися на 1 ряд/колонку. align-self: justify-self: place-self:

Вирівнює поточний елемент усередині комірки. Застосовується до окремого елемента контейнера.

// синтаксис: align-self: значення; // вирівнює елемент всередині комірки по вертикалі justify-self: значення; // вирівнює елемент усередині комірки по горизонталі ←→ place-self: значення; // скорочений запис: встановить обидва значення place-self: align-self justify-self; // скорочений запис

Значення може бути:

• stretch (defailt)- Розтягує поточний елемент на всю ширину / висоту комірки.
• start- Розташує поточний елемент на початку осередку (ліворуч або зверху).
• end- Розташує поточний елемент в кінці осередку (справа або внизу).
• center- Розташує поточний елемент по центру комірки.

Рідкісні значення:

safe значення- якщо ширина або висота елемента перевищує розмір комірки, значення перемикається на start. У значенні тут можливо тільки: center або end .

# Каркас для ігрової програми

#grid ( /** * Дві колонки: * 1. підлаштовується під контент, * 2. отримує все пространтсов, що залишилося * (але не може бути менше мінімального розміру контенту в ній або controls блоку в цій же колонці) * * Три ряди: * 1. підлаштовується під контент, * 2. отримує весь вільний простір * (але не може бути менше мінімального розміру будь-якого з блоків в цьому ряду) * 3. підлаштовується під контент. 1 */ auto /* 2 */ 1fr; grid-template-rows: /* 1 */ auto /* 2 */ 1fr /* 3 */ auto; /* розтягнемо на всю висоту */ height: 100vh; * вказує позиції блоків у сітці за допомогою координат */ #title ( grid-column: 1; grid-row: 1; ) #score ( grid-column: 1; grid-row: 3; ) #stats ( grid-column: 1; grid-row: 2; ) #board ( grid-column: 2; grid-row: 1 / span 2; ) #controls ( grid-column: 2; grid-row: 3; justify-self: center; )
Game Title
Score
Stats
Board
Controls

Ускладнимо завдання.

Тепер нам потрібно зробити так, щоб при повороті мобільного пристрою, каркас змінювався і виходило так:



У цьому випадку зручніше буде використовувати сітки Grid області.

/* книжкова орієнтація */ @media (orientation: portrait) ( #grid ( display: grid; /* створюємо структуру сітки і вкажемо назви областей, * Така структура буде працювати за умовчанням і підходи для альбомної орієнтації. */ grid-template- areas: "title stats" "score stats" "board board" "ctrls ctrls";/* вкажемо розміри для рядів і колонок. height: 100vh; ) ) /* альбомна орієнтація */ @media (orientation: landscape) ( #grid ( display: grid; /* створюємо структуру сітки і вкажемо назви областей, * Така структура буде працювати за умовчанням і підходити для альбомної орієнтації). */ grid-template-areas: "title board" "stats board" "score ctrls"; /* вкажемо розміри для рядів і колонок. ; height: 100vh; ) ) /* розташуємо елементи в іменовані області сітки */ #title ( grid-area: title; ) #score ( grid-area: score; ) #stats ( grid-area: stats; ) #board ( grid-area: board; ) #controls ( grid-area: ctrls; justify-self: center; )

Game Title
Score
Stats
Board
Controls

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

Grid підтримують 92% браузерів.

Нижче підтримка Grid браузерами за даними CanIuse. Число вказує, що браузер підтримує функцію у цій версії та вище.

Desktop

Chrome	Opera	Firefox	IE	Edge	Safari
57	44	52	11*	16	10.1

Mobile / Tablet

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
10.3	-	-	62	66	57

Щоб перевірити в css, чи підтримує поточний браузер Grid, можна використовувати @supports (в IE не працює):

@supports(display: grid) ( /* grid підтримується браузером */ div ( display: grid; ) ) @supports not(display: grid) ( /* grid НЕ підтримується браузером */ div ( display: flex; ) )