Пошук уроків, статей та іншого контенту
Розберемо minmax() і навчимося задавати мінімальний та максимальний розмір колонок або рядків.
minmax()Функція minmax() задає діапазон розміру для колонок або рядків CSS Grid:
minmax(мінімальний-розмір, максимальний-розмір)Браузер намагається зробити трек якомога більшим, але не дозволяє йому стати меншим за мінімальне або більшим за максимальне значення.
.grid {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr);
}У цьому прикладі:
перша колонка має бути не меншою за 200px;
друга колонка має бути не меншою за 300px;
вільний простір розподіляється між колонками у співвідношенні 1:2;
колонки можуть розширюватися, але їхня мінімальна ширина не порушується.
У minmax() передають два значення:
minmax(min, max)Наприклад:
minmax(150px, 400px)
minmax(20rem, 50%)
minmax(200px, 1fr)
minmax(auto, max-content)Мінімальне значення може бути фіксованою довжиною, відсотком або ключовим словом, наприклад auto.
Максимальне значення додатково може використовувати одиницю fr, яка розподіляє доступний вільний простір:
minmax(200px, 1fr)Це означає: «не менше ніж 200px, але за можливості зайняти одну частину доступного простору».
Одна з найпоширеніших конструкцій — повторювані колонки з мінімальною шириною:
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
gap: 24px;
}Сітка має три колонки. Кожна з них:
не стає вужчою за 200px;
розтягується, щоб заповнити доступний простір;
отримує однакову ширину, оскільки всі колонки мають 1fr.
Однак на вузькому екрані три колонки по 200px можуть не поміститися в один ряд. У такому разі браузер не зменшить їх нижче мінімального значення, а сітка може спричинити горизонтальне прокручування.
Для автоматичного перенесення колонок використовують auto-fit або auto-fill разом із minmax():
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
}Тепер браузер розміщує стільки колонок, скільки поміщається з мінімальною шириною 200px. Коли місця недостатньо, наступні картки переходять на новий рядок.
auto-fit і auto-fillОбидва значення часто використовуються з однаковою конструкцією:
repeat(auto-fit, minmax(220px, 1fr))auto-fit стискає порожні доріжки, тому наявні елементи можуть розтягуватися;
auto-fill зберігає потенційні порожні доріжки.
Для сітки карток зазвичай зручно використовувати auto-fit, оскільки картки заповнюють увесь доступний рядок.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}<!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;
padding: 24px;
font-family: Arial, sans-serif;
background: #f3f4f6;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
max-width: 1000px;
margin: 0 auto;
}
.card {
min-height: 160px;
padding: 20px;
border-radius: 12px;
background: white;
box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}
.card h2 {
margin-top: 0;
}
</style>
</head>
<body>
<main class="cards">
<article class="card">
<h2>HTML</h2>
<p>Структура вебсторінки.</p>
</article>
<article class="card">
<h2>CSS</h2>
<p>Стилізація та компонування.</p>
</article>
<article class="card">
<h2>JavaScript</h2>
<p>Інтерактивність у браузері.</p>
</article>
<article class="card">
<h2>Accessibility</h2>
<p>Зручність для всіх користувачів.</p>
</article>
</main>
</body>
</html>Ширина карток у цьому прикладі змінюється залежно від ширини контейнера:
на широкому екрані в одному рядку може бути кілька карток;
на вужчому екрані кількість колонок зменшується;
ширина картки не опускається нижче 220px;
додатковий простір рівномірно розподіляється між картками.
minmax() для рядківФункцію можна застосовувати не лише до колонок, а й до рядків:
.layout {
display: grid;
grid-template-rows: minmax(80px, auto) 1fr minmax(60px, auto);
}У цьому прикладі:
верхній рядок має висоту щонайменше 80px;
центральний рядок займає доступний простір;
нижній рядок має висоту щонайменше 60px;
якщо текст у верхньому або нижньому рядку не поміщається, рядок може збільшитися завдяки auto.
Це корисно для макетів із шапкою, основним вмістом і підвалом:
.page {
min-height: 100vh;
display: grid;
grid-template-rows: minmax(64px, auto) 1fr minmax(48px, auto);
}minmax() і звичайним frРозглянемо дві сітки:
.first {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.second {
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
}У першому варіанті колонки ділять доступний простір, але їхній фактичний вміст може вплинути на мінімальний розмір. У другому варіанті кожна колонка явно має мінімальну ширину 200px.
minmax() варто використовувати, коли потрібно одночасно:
обмежити мінімальний розмір елемента;
дозволити йому гнучко розширюватися;
уникнути жорстких медіазапитів для кожної ширини екрана.
minmax() може задавати не лише мінімум, а й максимум:
.sidebar-layout {
display: grid;
grid-template-columns: minmax(180px, 280px) 1fr;
gap: 24px;
}Бічна панель:
не буде вужчою за 180px;
не буде ширшою за 280px;
основний вміст займе весь залишок простору.
Так можна створити макет, у якому бічна панель залишається читабельною, але не займає надто багато місця.
Одна лише minmax() не завжди захищає сітку від довгих слів або невідривних рядків. Наприклад, довгий URL може змусити колонку стати ширшою за очікуване.
Для таких випадків часто використовують minmax(0, 1fr):
.content {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
}Мінімальне значення 0 дозволяє колонці стискатися. Вміст при цьому потрібно додатково налаштувати, наприклад:
.content__item {
overflow-wrap: anywhere;
}Важливо розуміти різницю:
minmax(200px, 1fr)Колонка не стане вужчою за 200px.
minmax(0, 1fr)Колонка може стискатися до нульової ширини, якщо цього вимагає доступний простір, а переповнення контролюється стилями вмісту.
Мінімальне значення не повинно бути більшим за максимальне:
/* Неправильно */
grid-template-columns: minmax(400px, 200px);Правильно:
grid-template-columns: minmax(200px, 400px);auto-fit або auto-fillЦя сітка має фіксовану кількість колонок:
grid-template-columns: repeat(4, minmax(220px, 1fr));На вузькому екрані вона може не поміститися. Для автоматичного перенесення використовуйте:
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));Якщо вказати:
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));на невеликому екрані навіть одна колонка може бути ширшою за контейнер. Мінімальний розмір потрібно обирати відповідно до вмісту та доступної ширини.
minmax() і min-widthminmax() керує розміром треків Grid:
.grid {
grid-template-columns: minmax(200px, 1fr) 1fr;
}min-width керує мінімальною шириною конкретного елемента:
.card {
min-width: 200px;
}Це різні рівні налаштування. Для адаптивної структури Grid зазвичай починають із grid-template-columns або grid-template-rows.
1fr як мінімумуЗначення fr призначене для максимального розміру в minmax():
/* Правильно */
grid-template-columns: minmax(200px, 1fr);Конструкція з 1fr як мінімальним значенням не є коректним способом описати такий діапазон:
/* Не використовуйте */
grid-template-columns: minmax(1fr, 400px);Щоб побудувати адаптивну сітку через minmax():
Визначте найменшу зручну ширину елемента.
Використайте її як перше значення minmax().
Для гнучкого заповнення простору використайте 1fr як друге значення.
Якщо кількість колонок має змінюватися автоматично, додайте repeat(auto-fit, ...).
Перевірте сітку на вузькому екрані та з довгим текстом.
Приклад:
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}Тут 240px — мінімальна ширина товарної картки, а 1fr дозволяє їй розширюватися.
minmax(min, max) задає мінімальний і максимальний розмір треку Grid.
minmax(200px, 1fr) означає: не менше 200px, але за можливості розтягнутися на доступний простір.
repeat(auto-fit, minmax(...)) допомагає створювати адаптивні сітки без великої кількості медіазапитів.
minmax() працює і для колонок, і для рядків.
Для бічних панелей з обмеженою шириною зручно використовувати конструкцію на кшталт minmax(180px, 280px).
minmax(0, 1fr) корисна, коли колонка має право стискатися, а вміст може переноситися або обрізатися.
Мінімальне значення потрібно обирати так, щоб елементи залишалися зручними на найвужчому екрані.