Вивчаємо CSS-гриди - CSS-LIVE
Вивчаємо CSS-гриди
Термінологія
Перш ніж почати верстати на грідах, потрібно вивчити кілька нових термінів.Грид-контейнер - елемент, до якого застосували display: grid. Усі його безпосередні нащадки -грид-елементи.
Визначаючи грід, ми вказуємо, скільки рядів та колонок нам потрібно. Потім система грід-розкладки генерує нумеровані лінії, які ділять грід по горизонталі та по вертикалі. Цегрід-лінії. Простір між двома сусідніми грід-лініями називаєтьсягрід-смугою. Це по суті збірний термін для колонок і рядів.
Нумеровані лінії гриду можна використовувати при розміщенні елементів. Грід-смуга - простір між будь-якими двома лініями в гриді (точніше, між будь-якими двомасусідними лініями - прим. перекл.).
Грид-осередок - найменша одиниця в гриді. Це перетин ряду та колонки. За змістом вона дуже схожа на комірку таблиці.
Грід-область - простір, утворений перетином 4 грід-ліній. Іншими словами, це набір з однієї і більше сусідніх грід-осередків.Важливо: грід-області можуть бути лише прямокутними. Не можна робити Т- або Г-подібні грід-області. Мені чомусь насамперед захотілося саме цього.
Грід-елементи можуть охоплювати одну або більше осередків - по рядах або колонках - це і є грід-область.
Визначаємо грид
Є багато різних способів поставити грид. Я збираюся зосередитись на базовому сценарії: 4 колонки на 5 рядів. grid-template-rows з grid-template-columns дозволяють задавати число і розміри рядів і колонок відповідно. Можна перераховувати лінії, як показано в прикладі нижче.
Найпростіший грід з 4 колонками та 5 рядами. Ряди визначені за допомогою grid-template-rows, а колонки - за допомогою grid-template-columns.
Грід готовий! Не найкорисніший із можливих гридів, але все-таки грид. У прикладі вище у кожного ряду висота 20px, а кожна колонка ширина 20px. Єдине, що тут варто відзначити те, що grid-template-rows і grid-template-columns дозволяють визначити грід-смуги. Потім браузер генерує грід-лінії автоматично. Ці лінії невидимі. Вони допомагають розташовувати елементи у гриді, але не впливають на дизайн візуально. Але все ж таки можливість бачити ці лінії вкрай корисна при налагодженні. На щастя, Firefox має вбудований грід-інспектор, який візуалізує нам грид (ура!).
У цьому прикладі розміри смуг у гриді фіксовано. Це так по-модному називається те, що у рядів та/або колонок фіксована ширина. Отже, грід залишиться того самого розміру незалежно від розміру контейнера.
Гнучкі гриди
Можна визначити і грід із гнучкими розмірами смуг. Або навіть з фіксованими та гнучкими смугами одночасно! (Див. приклад нижче.) Значення у відсотках тут відносяться до процентів від грід-контейнера.
Гнучкий грід, де ми намішали різних одиниць для розмірів смуг — пікселі, відсотки, одиниці в'юпорту та em-и.
Одиниця fr
Погляньмо на ще один приклад гнучкого гриду. Тут ми, як і раніше, будемо робити сітку 4х5, але нам треба, щоб ряди та колонки розтягувалися та заповнювали весь контейнер. Для цього ми скористаємося одиницею fr.
На цьому місці у вас, можливо, готове вирватися питання: якусь одиницю?
Гнучкий грід з 4 колонками та 5 рядами. Його гнучкість забезпечена завданням рядів і колонок значення 1fr.
В нас нова одиниця! Одиниця fr є частка доступного простору в грід-контейнері. Ви писали коли-небудь flex: 1 , flex: 2 і т.д.? Ось і це працює так само. Можна ставитирозміри смуг як співвідношення місця, напр. 1fr 2fr.
На замітку: можна задавати розміри смуг в одиницях довжини, відсотках або fr.
Грід не буде справжнім гридом без інтервалів між смугами. Для цього передбачені властивості grid-column-gap і grid-row-gap або їх скорочення grid-gap. Інтервали у гриді створюються лише між смугами. Перед першою смугою або після останньої лінії інтервалів немає.
Важливо: навіть якщо між двома сусідніми смугами є інтервал, це все одно одна грід-лінія.
Гнучкий грід 4х5 з інтервалами (проміжками). Інтервали можна робити властивістю grid-gap.
Розміщення грід-елементів
Розміщення елементів у гриді досить схоже абсолютне позиціонування. Тільки ми вказуємо не координати в одиницях довжини, а початкову та кінцеву грід-лінії.
Можна розмістити елемент у гриді за допомогою grid-column-start, grid-column-end і grid-row-start, grid-row-end.
Внизу приклад на CodePen, що показує кілька різних стилів розміщення. Зверніть увагу, що грід-елементи можуть перекриватися. Для керування порядком накладання можна використовувати властивість z-index.
Автоматизуємо все, що можна
Насамкінець я хочу продемонструвати ще пару понять на прикладах. Я хочу відтворити цю сітку товарів із сайту Aldo. Ось що тут треба зазначити:
- На великих екранах (> 60em) це сітка 4х5
- У ній розміщено 13 елементів
- Деякі елементи займають по 2 колонки та/або 2 ряди
- Всі картинки мають пропорції 1000 : 1270
- Між осередками інтервал у 1rem, а по периметру гриду відступ теж у 1rem
- Максимальна ширина гриду обмежена до 60
Грид також змінюється у певних контрольних точках. на середніхпристроях (від 30em до 60em) він скорочується до 3 колонок, а на маленьких пристроях ( ) - до двох. Нарешті, нам потрібно зберігати пропорцію 1000:1270 між розмірами рядів і колонок.
Грід із товарами в стилі Aldo. 2 колонки на невеликих пристроях, 3 на середніх і 4 - на високих.
Визначаємо розміри рядів та колонок
До цього часу ми визначали грид з допомогою чогось типу grid-template-columns: repeat(4, 1fr) and grid-template-rows: repeat(5, 1fr) . Через пропорції в 1000: 1270 ми більше так не можемо. Натомість нам знадобиться трохи математики, щоб знайти розміри рядів і колонок. Ми можемо скористатися для цього CSS-змінними та calc. Розрахувати ширину колонок та висоту рядів можна за цією формулою:
| Типово (до 30em) | 100vw | (1+2)rem | 2 |
| min-width: 30em and max-width: 60em | 100vw | (2 + 2) rem | 3 |
| min-width: 60em | 60em | (3+2)rem | 4 |
Отже, у випадку за замовчуванням w>. Чудово! Давайте зберемо все разом. Почнемо з визначення значення за промовчанням у :root. Потім у кожній контрольній точці перерахуємо width і оновимо властивість grid-template-columns.
Автоматичні ряди
У попередньому прикладі коду ви могли звернути увагу на grid-auto-rows: var(-height) . Це дає команді браузеру автоматично генерувати рівно стільки рядів, скільки потрібно, щоб вмістити всі елементи. Тож якщо ми додамо ще елементів, він додасть ще рядів, і навпаки. Значення grid-auto-rows — те, якою висоти ряди нам потрібні.
Приклад на CodePen нижче показує, як виглядатиме наш грід наНаразі. Відкрийте його в режимі редагування, щоб побачити, як працює розширення та звуження вікна, а також що відбувається при додаванні та видаленні
Елементи на кілька смуг
Як я зазначив раніше, деякі елементи охоплюють кілька смуг. Для цього ми можемо використовувати прийом з grid-end: span . Картинки у нас охоплюють те саме число смуг при всіх розмірах екранів. Але інформація про товар охоплює 3 колонки на середніх екранах і 2 колонки в інших діапазонах. Тому ми застосовуємо до них wide-2 wide-3-m. Інші елементи використовують wide-2 tall-2.
Бажаєте дізнатися більше про автоматичне розміщення? Ось чудові туторіал і наочний приклад Рейчел Ендрю.
Щільна упаковка
Висновок
Що далі? Ви знали, що грід-лінії можна назвати? Ви знали, що можна вирівнювати елементи у смугах за допомогою властивостей align and justify? А що можна вказувати розміри у вигляді діапазонів "від і до" за допомогою minmax? Ще стільки всього належить відкрити! Я знаю, це може здатися надто неосяжним. Просувайтесь потроху. Верстайте. Експериментуйте. Не можна миттєво зрозуміти одразу все, це нормально.