Про інструмент Grid Layout

Якщо колись створення складних макетів вимагало від розробників купу хитромудрих трюків і часу, то з появою Grid усе стало напрочуд просто й ефективно. Отже, Grid це потужний інструмент, який змінив обличчя веб-розробки. Якщо ви хочете створювати креативні, адаптивні та ефективні макети для веб-сторінок, вам точно стане в пригоді розуміння того, що таке grid. Це двовимірна система розміщення елементів на веб-сторінці. Тепер ви можете створювати сітки з горизонтальних і вертикальних ліній, на яких легко розміщувати вміст вашого веб-сайту. Не потрібно вдаватися в складнощі позиціонування або вбудовування елементів в інші такі самі — цей інструмент бере на себе всю важку роботу, вам же дістається — повний контроль.

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

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

Основи Grid Layout

CSS Grid Layout (або просто Grid) – це технологія в Cascading Style Sheets (CSS), яка дає змогу веб-розробникам створювати складні макети веб-сторінок і веб-додатків за допомогою сіток і комірок. Вона надає більш зручні та передбачувані способи розміщення елементів на веб-сторінці, ніж традиційні методи, як-от використання float і positioning.

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

Основна проблема з float полягала в тому, що була необхідність “очищати” елементи після його застосування. Це додавало зайвий код і ускладнювало структуру сторінки. З Grid цієї проблеми немає. Ви просто визначаєте елементи як дочірні елементи контейнера Grid, і він автоматично вибудовує їх у потрібному порядку.

Тепер про важливість підтримки браузерами. Ми отримали потужний інструмент, але, як і з будь-якою новою технологією, підтримка різними браузерами — необхідна. На щастя, зараз майже всі сучасні браузери, включно з Chrome, Firefox, Safari та Edge, повністю підтримують Grid. Це означає, що ви можете використовувати його у своїх проєктах без переживання про сумісність.

Однак, незважаючи на це, важливо пам’ятати, що ваша аудиторія може включати користувачів, які використовують старіші версії браузерів, які можуть не підтримувати останні функції CSS Grid. У таких випадках вам доведеться вирішувати, чи використовувати альтернативні методи розмітки, чи надати простішу, але функціональнішу версію сайту для цих користувачів.

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

Елементи 

У Grid Layout є дві ключові частини: контейнери та дочірні елементи. Контейнер визначає сітку, а дочірні елементи автоматично розподіляються по цій сітці. Прості приклади коду можуть допомогти вам швидко опанувати цей концепт і почати створювати власні макети.

.container {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  grid-gap: 20px;

}

.item {

  background-color: #3498db;

  color: white;

  text-align: center;

  padding: 20px;

}

Розглянемо кожен з елементів детальніше:

1. Контейнери

Це батьківський елемент, який ви визначаєте у вашому CSS для створення сітки. Щоб перетворити елемент на контейнер Grid, просто додайте до нього властивість display: grid;. Це показує браузеру, що цей елемент буде використовувати Grid Layout.

Приклад:

.container {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr; /* Three columns with equal space between them */

  grid-gap: 20px; /* Gap between grid cells */

}

2. Дочірні елементи

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

Приклад:

.item {

  grid-column: span 2; /* This element spans two columns */

  grid-row: span 3; /* This element spans three rows */

}

А тепер уявімо, що ви хочете створити макет із трьома колонками і кількома рядками. Кожен елемент займе одну клітинку сітки. Наведемо приклад із двома окремими блоками коду, які можна об’єднати для створення структурованого макета;

<div class="container">

  <div class="item">Item 1</div>

  <div class="item">Item 2</div>

  <div class="item">Item 3</div>

  <div class="item">Item 4</div>

  <div class="item">Item 5</div>

  <div class="item">Item 6</div>

</div>

Перший блок коду — це HTML-розмітка з контейнером (.container) і шістьма дочірніми елементами (.item), що являють собою вміст кожної комірки сітки.

.container {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr; /* Three columns */

  grid-gap: 20px; /* Gap between grid cells */

}

.item {

  background-color: #3498db;

  color: white;

  text-align: center;

  padding: 20px;

}

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

У цьому прикладі кожен елемент .item займе одну третину свого батьківського контейнера за шириною і матиме відстань у 20 пікселів між собою.

Таким чином, Grid дає змогу створювати зрозумілі та зручні макети, роблячи веб-розробку гнучкішою та легшою в розумінні;

Властивості 

Давайте детальніше розглянемо деякі з ключових властивостей Grid, які допоможуть вам створювати різноманітні та ефективні макети.

1. grid-template-columns та grid-template-rows

Ці властивості дають змогу вам визначити кількість і розміри колонок і рядків у вашій сітці. Ви можете використовувати значення, такі як 1fr (одна частка доступного простору), 100px (фіксований розмір) або auto (автоматичний розмір, заснований на вмісті).

.container {

  display: grid;

  grid-template-columns: 1fr 2fr 1fr; /* Three columns: first 1/3, second 2/3, third 1/3 of the available space */

  grid-template-rows: 100px auto; /* Two rows: first row is 100px, second row adjusts automatically to fit the content */

}

2. grid-gap

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

.container {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 20px; /* Gap between grid cells is 20 pixels */

}

3. grid-auto-columns та grid-auto-rows

Ці властивості дають змогу визначити розміри колонок і рядків, які створюються автоматично, без явного завдання в grid-template-columns і grid-template-rows. Це особливо корисно, якщо ви маєте справу з динамічним вмістом.

.container {

  display: grid;

  grid-auto-columns: 100px; /* Automatically created columns have a width of 100px */

  grid-auto-rows: minmax(50px, auto); /* Automatically created rows have a height from 50px to automatic fitting to content */

}

4. grid-column і grid-row

Ці властивості дають змогу елементам займати кілька колонок і рядків у сітці.

.item {

  grid-column: span 2; /* This element spans two columns */

  grid-row: span 3; /* This element spans three rows */

}

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

Одиниця виміру

Одиниця виміру fr використовується для визначення розміру дочірніх елементів у сітці. fr означає “fractional unit” (фракція).

З переваг одиниці виміру можна виділити гнучкість, простоту використання та універсальність у підтримці різних браузерів.

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

.container {

  display: grid;

  grid-template-columns: 1fr 1fr;

}

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

Загалом, одиниця виміру fr – досить потужний інструмент, який дає змогу веб-розробникам створювати гнучкі та адаптивні макети.

Практичні приклади

Уявімо, що ви хочете створити адаптивний макет для блогу. Гріди це дають змогу зробити легко:

.container {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  grid-gap: 20px;

}

.post {

  background-color: #ecf0f1;

  padding: 20px;

}

.sidebar {

  grid-column: span 1;

}

Цей код створює макет із трьома колонками, де пости займають дві колонки, а бічна панель – одну.

Це хороший приклад коду адаптивного макета в Grid у CSS. Код використовує властивість grid-template-columns для визначення трьох рівних стовпців у сітці. Властивість grid-gap використовується для визначення відстані між стовпцями.

Щоб зробити макет адаптивним, властивість grid-column використовується для визначення того, скільки стовпців займає дочірній елемент. У цьому випадку дочірній елемент .sidebar займає один стовпець.

Така css grid верстка означає, що на мобільних пристроях пост і бічна панель відображатимуться в один стовпець. На настільних комп’ютерах та інших пристроях із великим екраном пост і бічна панель відображатимуться в три стовпці.

Висновок

Знання Grid – це ключ до створення красивих і функціональних веб-сайтів. Не зупиняйтеся на досягнутому: експериментуйте, створюйте свої унікальні макети та досліджуйте всі можливості, які він надає. І пам’ятайте, що найкращий спосіб навчитися – це практика. Не бійтеся помилятися і пробувати нові речі. Успіхів вам у захопливому світі веб-розробки!