Grid-лінії — це горизонтальні та вертикальні лінії в гріді. Кожен рядок і колонка мають grid-лінію з кожного свого боку.
Кожна grid-лінія має числовий індекс, на який ви можете посилатися під час розміщення grid-елементів.
На прикладі вище, перший grid-елемент починається зі рядкової лінії 1 і колонкової лінії 1, а закінчується на рядковій лінії 2 і колонковій лінії 2. Другий grid-елемент починається на рядковій лінії 3 і колонковій лінії 2, а закінчується на рядковій лінії 4 і колонковій лінії 4.
Все описане вище можна зробити за допомогою такого коду.
У цьому випадку нам необов’язково вказувати кінцеві значення для першого елемента, тому що він охоплює лише один трек. Те саме можна сказати і про другий grid-елемент. За замовчуванням, якщо ви не вказуєте кінцеву лінію, то елемент займе лише один трек.
Насправді, нам не потрібно було вказувати позиціонування для першого grid-елемента, адже він знаходиться на певній позиції, тому він би опинився там у будь-якому випадку. Але якщо б ми не вказали позиціонування для другого елемента, то він би знаходився одразу після першого, займаючи лише 1 трек.
І за замовчуванням кожен елемент у гріді позиціонується в одну клітинку послідовно. Але ми можемо більш точно налаштувати розташування елемента у гріді за допомогою низки властивостей:
За допомогою спеціального слова span можна задати розтягнення елемента на кілька клітинок.
Після слова span вказується, на скільки клітинок потрібно розтягнути елемент:
.special-item{
grid-row: 1 / span 2;
grid-column: 2 / span 2;
}
Елемент поміщається в клітинку, яка знаходиться на перетині першого рядка і другого стовпця, і розтягується на два рядки вниз і на два стовпці вправо.
grid-area — це прямокутне перетинання сітки, обмежене grid-лініями з кожного боку (тобто 4 grid-лінії: 2 горизонтальні і 2 вертикальні). Найпростіший (і найменш цікавий) спосіб використання цієї функції — це скорочення для вказання рядків і колонок для grid-елемента. Кожна з секцій із прикладу вище могла б бути спрощена за допомогою одного правила grid-area:
Можна сказати, що властивість grid-area об’єднує властивості grid-column і grid-row, дозволяючи скоротити їх запис:
grid-area: row-start / column-start / row-end / column-end
Наприклад, змінимо стилі класу special-item у прикладі номер 1:
.special-item{
grid-area: 1 / 2 / 3 / 4;
}
Перший грід елемент починається з рядкової лінії 1 і колонкової лінії 1, а закінчується на рядковій лінії 1 і колонковій лінії 4. Замість 4 можна написати -1.
Другий грід елемент починається на рядковій лінії 2 і колонковій лінії 1, а закінчується там же.
Третій грід елемент починається з рядкової лінії 2 і колонкової лінії 2, а закінчується на рядковій лінії 2 і колонковій лінії 4.
Маніпулюючи положенням елементів, ми легко можемо здійснити їх накладання, створити свого роду шари з елементів. Наприклад, визначимо наступний грід:
Тут перший елемент займає той же простір, що і п’ять наступних елементів. Завдяки встановленню властивості z-index: 1 у всіх елементів виходить, що перший елемент ніби лежить фоном під іншими п’ятьма елементами.
За необхідності шар з першого елемента можна навпаки перенести ближче до користувача, накривши інші елементи. Для цього треба збільшити у нього значення z-index:
