Пошук уроків, статей та іншого контенту
Розберемо одиницю fr, явні лінії сітки та розміщення елементів у конкретних колонках і рядках.
frfr — це одиниця гнучкої частини доступного простору в CSS Grid. Вона використовується для розподілу вільного місця між колонками або рядками.
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
}У цьому прикладі доступний простір розподіляється у співвідношенні 1:2:
перша колонка отримує одну частину;
друга колонка отримує дві частини.
Якщо ширина сітки становить 900px, а між колонками немає проміжку:
перша колонка матиме 300px;
друга колонка матиме 600px.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}Три колонки 1fr отримають однакову ширину.
fr разом із фіксованими значеннямиФіксовані значення займають простір першими, а fr розподіляє залишок.
.grid {
display: grid;
grid-template-columns: 240px 1fr 2fr;
}Якщо ширина контейнера — 1000px, а проміжки не враховувати:
240px займає перша колонка.
Залишається 760px.
Цей простір ділиться між 1fr і 2fr.
Друга колонка отримує приблизно 253.33px.
Третя колонка отримує приблизно 506.67px.
На практиці потрібно також враховувати gap, адже проміжки займають частину ширини контейнера.
.grid {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
}У такій сітці перша колонка має ширину 200px, а друга займає весь доступний простір, що залишився після врахування gap.
Grid створює не лише колонки та рядки, а й лінії між ними.
Наприклад:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px;
}У сітці буде:
3 колонки;
2 рядки;
4 вертикальні лінії;
3 горизонтальні лінії.
Лінії нумеруються з 1:
Вертикальні лінії: 1 2 3 4
|-------|-------|-------|
| | | |
Рядок 1 |-------|-------|-------|
| | | |
Рядок 2 |-------|-------|-------|
1 2 3 4Горизонтальні лінії в цьому прикладі мають номери 1, 2 і 3.
Номер лінії визначає межу області, у якій буде розташований елемент.
Для розміщення елемента між вертикальними лініями використовується властивість grid-column.
.item {
grid-column: 1 / 3;
}Елемент починається на лінії 1 і закінчується на лінії 3. Отже, він займає дві колонки:
Лінії: 1 2 3 4
|-------|-------|-------|
|<------ елемент ------>|Властивість має такий формат:
grid-column: початкова-лінія / кінцева-лінія;Приклади:
.first {
grid-column: 1 / 2; /* лише перша колонка */
}
.second {
grid-column: 2 / 4; /* друга та третя колонки */
}
.third {
grid-column: 3 / 5; /* третя та четверта колонки */
}Кінцева лінія не входить до області елемента. Тому 1 / 3 означає колонки між лініями 1 і 3, тобто першу та другу.
spanЗамість кінцевої лінії можна вказати, скільки колонок має зайняти елемент:
.item {
grid-column: 2 / span 2;
}Елемент починається на лінії 2 і займає дві колонки.
Це еквівалентно такому запису:
.item {
grid-column: 2 / 4;
}Також можна вказати лише початкову лінію:
.item {
grid-column: 2;
}У такому разі елемент починається з лінії 2, а його ширина визначається автоматично. Для явного контролю розміщення зазвичай краще вказувати початкову та кінцеву лінії або використовувати span.
Для горизонтальних ліній використовується властивість grid-row.
.item {
grid-row: 1 / 3;
}Елемент займає простір між горизонтальними лініями 1 і 3, тобто два рядки.
Як і для колонок, можна використовувати span:
.item {
grid-row: 2 / span 2;
}Елемент починається з другого рядка і займає два рядки.
Щоб повністю визначити позицію елемента, можна поєднати grid-column і grid-row:
.card {
grid-column: 2 / 4;
grid-row: 1 / 3;
}Такий елемент:
починається з вертикальної лінії 2;
закінчується на вертикальній лінії 4;
починається з горизонтальної лінії 1;
закінчується на горизонтальній лінії 3.
Отже, він займає дві колонки та два рядки.
Розглянемо сторінку панелі керування:
заголовок розтягується на всю ширину;
бічна панель займає першу колонку;
основний вміст розташований у другій і третій колонках;
нижній блок також розтягується на всю ширину.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Панель керування</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f1f5f9;
color: #0f172a;
}
.dashboard {
display: grid;
grid-template-columns: 220px 1fr 1fr;
grid-template-rows: 80px minmax(300px, auto) 80px;
gap: 16px;
min-height: 100vh;
padding: 16px;
}
.dashboard__header {
grid-column: 1 / 4;
grid-row: 1;
display: flex;
align-items: center;
padding: 24px;
border-radius: 12px;
background: #2563eb;
color: white;
}
.dashboard__sidebar {
grid-column: 1;
grid-row: 2;
padding: 24px;
border-radius: 12px;
background: #1e293b;
color: white;
}
.dashboard__content {
grid-column: 2 / 4;
grid-row: 2;
padding: 24px;
border-radius: 12px;
background: white;
}
.dashboard__footer {
grid-column: 1 / 4;
grid-row: 3;
display: flex;
align-items: center;
padding: 24px;
border-radius: 12px;
background: #cbd5e1;
}
</style>
</head>
<body>
<main class="dashboard">
<header class="dashboard__header">
<h1>Панель керування</h1>
</header>
<aside class="dashboard__sidebar">
<h2>Навігація</h2>
<p>Профіль</p>
<p>Налаштування</p>
</aside>
<section class="dashboard__content">
<h2>Основний вміст</h2>
<p>
Цей блок займає другу та третю колонки сітки.
</p>
</section>
<footer class="dashboard__footer">
<p>Стан системи: активна</p>
</footer>
</main>
</body>
</html>У цьому прикладі контейнер має три колонки:
grid-template-columns: 220px 1fr 1fr;Перша колонка має фіксовану ширину 220px. Дві інші колонки порівну ділять простір, що залишився.
Заголовок має такі правила:
.dashboard__header {
grid-column: 1 / 4;
grid-row: 1;
}Він розміщується між лініями 1 і 4, тому займає всі три колонки.
Бічна панель:
.dashboard__sidebar {
grid-column: 1;
grid-row: 2;
}Вона розташована в першій колонці другого рядка.
Основний вміст:
.dashboard__content {
grid-column: 2 / 4;
grid-row: 2;
}Він починається у другій колонці та займає дві колонки.
Коли вказано grid-template-columns або grid-template-rows, створюються явні колонки та рядки:
.grid {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 100px 200px;
}Тут явно створено:
три колонки;
два рядки.
Якщо елементів більше, ніж визначених рядків, браузер автоматично створить додаткові рядки. Такі рядки називаються неявними.
Наприклад, якщо в сітці визначено два рядки, але елементів потрібно розмістити на третьому рядку, браузер створить його автоматично:
.grid {
display: grid;
grid-template-rows: 100px 200px;
grid-auto-rows: 150px;
}Властивість grid-auto-rows визначає висоту автоматично створених рядків. Проте для розміщення за конкретними лініями важливо передусім правильно визначити явну сітку через grid-template-columns і grid-template-rows.
Лінії можна рахувати не лише від початку, а й від кінця. Остання лінія має номер -1, передостання — -2 і так далі.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.full-width {
grid-column: 1 / -1;
}Запис 1 / -1 означає: від першої лінії до останньої. Елемент займе всі колонки незалежно від їхньої кількості.
Це зручно для елементів, які мають розтягуватися на всю ширину сітки:
.header {
grid-column: 1 / -1;
}
.footer {
grid-column: 1 / -1;
}Для трьох колонок потрібно чотири вертикальні лінії:
grid-template-columns: 1fr 1fr 1fr;Тому розміщення на всю ширину записується так:
grid-column: 1 / 4;Або коротше:
grid-column: 1 / -1;.item {
grid-column: 1 / 3;
}Це не три колонки, а дві: між лініями 1–2 і 2–3.
Щоб зайняти три колонки, потрібно використати:
.item {
grid-column: 1 / 4;
}gapfr розподіляє доступний простір, що залишився після фіксованих розмірів і проміжків. Якщо колонки неочікувано виходять за межі контейнера, перевірте значення:
gap;
padding;
фіксованих колонок;
мінімальної ширини вмісту.
Якщо для одного елемента вказано grid-column, але не вказано grid-row, браузер самостійно визначить його рядок. Це може призвести до несподіваного розташування.
Якщо позиція має бути точною, задайте обидві властивості:
.item {
grid-column: 2 / 4;
grid-row: 2 / 3;
}fr описує гнучку частину вільного простору сітки.
Значення 1fr 2fr розподіляють доступний простір у співвідношенні 1:2.
Для трьох колонок створюються чотири вертикальні лінії.
grid-column визначає розміщення елемента між вертикальними лініями.
grid-row визначає розміщення елемента між горизонтальними лініями.
Запис 1 / 3 охоплює дві колонки або два рядки, а не три.
span задає кількість колонок чи рядків, які має зайняти елемент.
Номер -1 позначає останню лінію сітки.
Для передбачуваного розміщення можна одночасно задавати grid-column і grid-row.