Від автора: у цьому уроці ви навчитеся змінювати порядок слідування елементів за допомогою модуля Grid Layout, після чого ми обговоримо, як вирівнювання цих елементів у сітці. Ми вже вивчили кілька важливих тем за Grid. Почали ми з різних способів розміщення елементів в Grid Layout, після чого познайомилися з алгоритмом авторозміщення в сітці. Для правильної роботи демо в цьому уроці рекомендую використовувати останню версію Firefox (52 на момент написання статті) або Chrome (57 на момент написання статті).
Принцип роботи властивості order в Grid Layout
За допомогою властивості order можна налаштувати порядок слідування елементів у сітці. За замовчуванням використовується порядок, в якому записані елементи в DOM. Наприклад, якщо у вихідному документі елемент знаходиться вище елемента, то в сітці цей елемент буде стояти перед елементом Ст. В деяких проектах може знадобитися можливість поміняти вихідних порядок.
Властивість order особливо зручно використовувати, коли багато елементів, або коли вони додаються динамічно. Якщо в таких випадках потрібно, щоб елемент додавався завжди у край сітки, властивість order з легкістю забезпечить вам це.
Першими в сітці відображаються елементи з найменшим значенням order, після яких йдуть елементи з великим значенням. Якщо значення збігаються, сортування буде виконана з урахуванням вихідного порядку в документі.
Розберемо приклад. Наша розмітка:
CSS код для розміщення елементів, сітки:
.c {
grid-row-start: 1;
grid-row-end: 2;
}
.e {
grid-row-start: 1;
grid-row-end: 3;
}
.b, .j {
order: 2;
}
.a, .i {
order: 3;
}
Якщо згадати етапи алгоритму авторозміщення, то елементи з чітко прописаної позицією ряду розміщуються раніше елементів з незаданным положенням. Тому елемент D з незаданным положенням в рядку і стовпці, незважаючи на те, що у вихідному документі він іде перед Е, буде розташований після елемента Е (так як у нього чітко задана позиція рядки: grid-row-start: 1 і grid-row-end: 3).
В елементах без чітко заданої позиції в пріоритеті ті, у яких значення order менше. Тому елементи D, F, G і H розташовані перед A і B. У елементів B J однакове значення order, тому вони розміщуються відповідно до початкового порядку в документі. Зверніть увагу, що елементи B J знаходяться перед А та I, так як їм присвоєно менше значення order.
Перш ніж змінювати порядок елементів за допомогою властивості order, згадайте про доступність. Це властивість не змінює порядок в невізуальні середовищах. Воно також не змінює порядок обходу елементів у документі, коли перегляд здійснюється через режими послідовної навігації типу вкладок. Не використовуйте цю властивість, якщо візуальний порядок повинен збігатися з мовним або порядком навігації.
Логічна перестановка елементів у сітці за допомогою властивості order викличе невідповідності в стилях.
Вирівнювання вмісту по осі рядка в Grid Layout
За допомогою властивостей justify-self і justify-items можна контролювати вирівнювання елементів, сітки по осі рядка. Властивість justify-self вирівнює вміст одного елемента, а justify-items – всіх елементів в сітці. Властивість justify-self приймає 4 можливих значення:
end вирівнює вміст по правому краю сітки;
start вирівнює вміст по лівому краю сітки;
center вирівнює вміст по центру сітки;
stretch заповнює всю ширину сітки.
За замовчуванням justify-self приймає значення stretch. Властивість justify-items також вирівнює елементи по осі рядка і приймає ті ж значення, що і justify-self. Також задано stretch. Демонстрація роботи justify-self:
Вирівнювання вмісту по осі колонки в Grid Layout
Вміст можна також вирівнювати по осі колонки. З допомогою align-self це можна робити для одного елемента сітки, за допомогою align-items – для всіх.
Як і попередні дві властивості, align-self і align-items беруть 4 можливих значення: start, end, center і stretch.
Значення start і end вирівнюють контент по верхній і нижній межі сітки відповідно. Значення center вирівнює вміст по центру сітки, а justify заповнює всю висоту.
Великий пробіл між першим і другим рядом в демо нижче викликаний тим, що елементи першого ряду вирівняні по верхньому краю, а елементи другого ряду – по нижньому. Демонстрація align-self в дії.
Вирівнювання всієї сітки
Іноді зовнішні межі сітки можуть не збігатися з зовнішніми краями контейнера. Таке може відбуватися, коли рядка або колонки мають фіксований розмір. У таких випадках може знадобитися вирівнювання сітки в певному напрямку.
Як і з попередніми властивостями, по осі рядка сітку можна вирівняти за допомогою justify-content, а по осі стовпця за допомогою align-content.
Обидва властивості застосовуються до контейнера сітки і крім звичайних значень start, end, center і stretch приймають space-around, space between і space-evenly.
space-around робить рівні відступи між треками сітки і половину інтервалу між зовнішніми краями сітки і контейнером;
space between робить рівні відступи між треками сітки і прибирає відстань між зовнішніми краями сітки і контейнером;
space-evenly робить рівні відступи між треками сітки, а також між зовнішніми краями сітки і контейнером.
Обидва властивості justify-content та align-content за замовчуванням задані в start. Елементи сітки в демо нижче вирівняні за допомогою наступного CSS коду:
.container {
justify-content: space-around;
align-content: space-evenly;
}
Таке вирівнювання може викликати небажані ефекти. Наприклад, якщо елемент сітки займає кілька рядків або колонок, то його ширина або висота можуть збільшитися. Зміна висоти і ширини у такому випадку залежить від кількості роздільників, які перетинає цей елемент в кожному напрямку.
Висновок
У цьому уроці ми повністю вивчили основи сортування і вирівнювання елементів у Grid. Це підвищить керованість ваших сітчастих макетів.
