Пошук уроків, статей та іншого контенту
Створимо сітки, де колонки автоматично додаються або переносяться залежно від доступної ширини контейнера.
auto-fitCSS Grid може автоматично визначати, скільки колонок поміститься в контейнері:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}Цей запис означає:
repeat(...) повторює опис колонки;
auto-fit створює стільки колонок, скільки поміщається в доступній ширині;
minmax(220px, 1fr) задає:
мінімальну ширину колонки — 220px;
максимальну ширину — одну доступну частину (1fr);
gap додає проміжки між елементами.
Якщо контейнер широкий, у ньому з’явиться більше колонок. Якщо ширини недостатньо, колонки автоматично переносяться на нові рядки.
<!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-color: #f3f4f6;
}
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
max-width: 1000px;
margin: 0 auto;
}
.product {
padding: 24px;
border-radius: 12px;
background-color: white;
box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}
.product h2 {
margin-top: 0;
font-size: 20px;
}
.product p {
margin-bottom: 0;
color: #4b5563;
}
</style>
</head>
<body>
<main class="products">
<article class="product">
<h2>Ноутбук</h2>
<p>Потужний пристрій для роботи та навчання.</p>
</article>
<article class="product">
<h2>Монітор</h2>
<p>Великий екран для комфортної роботи.</p>
</article>
<article class="product">
<h2>Клавіатура</h2>
<p>Зручна клавіатура для щоденного використання.</p>
</article>
<article class="product">
<h2>Миша</h2>
<p>Точне керування курсором.</p>
</article>
<article class="product">
<h2>Навушники</h2>
<p>Чистий звук під час роботи та відпочинку.</p>
</article>
</main>
</body>
</html>Спробуйте змінювати ширину вікна браузера:
на широкому екрані картки розташуються в кілька колонок;
коли ширини стане недостатньо, частина карток перейде на наступний рядок;
на вузькому екрані кожна картка може зайняти весь доступний рядок.
Для цього не потрібні медіазапити з окремими значеннями для планшета чи телефона.
Мінімальна ширина в minmax() визначає, наскільки вузькими можуть бути колонки:
.grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}У цьому прикладі колонка не стане вужчою за 180px.
Значення потрібно підбирати відповідно до вмісту:
/* Короткі картки */
.grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
/* Картки з довшими описами */
.grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}Якщо мінімальна ширина занадто велика, колонки почнуть переноситися раніше. Якщо вона занадто мала, тексту й елементам усередині може бракувати місця.
Розглянемо правило:
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));Алгоритм браузера можна описати так:
Знайти максимальну кількість колонок, для яких вистачає місця.
Створити колонки шириною щонайменше 240px.
Розподілити вільний простір між колонками через 1fr.
Перенести елементи на нові рядки, якщо вони не поміщаються в поточному рядку.
Наприклад, контейнер шириною 760px із проміжками 20px може вмістити три колонки приблизно по 240px:
240px + 20px + 240px + 20px + 240px = 760pxЯкщо контейнер стане вужчим, три колонки вже не помістяться, тому браузер використає дві або одну колонку.
gapgap також займає місце в контейнері:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}Чим більший проміжок, тим менше колонок може поміститися в одному рядку.
Наприклад, для трьох колонок шириною щонайменше 220px потрібно місце для:
220px + 24px + 220px + 24px + 220pxТому при використанні великих значень gap колонки можуть переноситися раніше, ніж очікується.
auto-fit і порожні колонкиauto-fit підлаштовує сітку під фактичну кількість елементів. Порожні колонки стискаються, а наявні елементи можуть зайняти додатковий простір.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}Якщо в сітці залишився лише один елемент, він може розтягнутися на всю доступну ширину:
┌────────────────────────────────┐
│ Елемент │
└────────────────────────────────┘Це корисно для карток, які мають рівномірно заповнювати контейнер незалежно від їхньої кількості.
Без auto-fit кількість колонок потрібно задавати вручну:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}Цей варіант завжди намагається використовувати три колонки. Для адаптації під різні екрани доведеться додавати медіазапити:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 700px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 450px) {
.grid {
grid-template-columns: 1fr;
}
}За допомогою auto-fit те саме можна описати одним правилом:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}Такий підхід зручний, коли точна кількість колонок не є принциповою, а важливо лише зберегти мінімальну комфортну ширину елементів.
auto-fit разом із minmax(0, 1fr)У деяких сітках потрібно, щоб колонки могли стискатися до нульової ширини. Тоді використовують:
.grid {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}Але такий варіант не задає мінімально комфортну ширину. Елементи можуть стати надто вузькими, тому для адаптивних карток зазвичай краще вказувати реальне мінімальне значення:
.grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}1fr без minmax().grid {
grid-template-columns: repeat(auto-fit, 1fr);
}auto-fit має працювати з повторюваним розміром треку, а 1fr сам по собі не визначає мінімальну ширину колонки. Для практичної адаптивної сітки використовуйте minmax():
.grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}.grid {
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}На вузьких екранах така колонка може не поміститися в контейнер. Якщо внутрішній контент не потребує великої ширини, зменште мінімальне значення.
.grid {
width: 1000px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}Навіть ідеальна формула не зробить сітку адаптивною, якщо сам контейнер ширший за екран. Для контейнера зазвичай використовують:
.grid {
width: 100%;
max-width: 1000px;
}box-sizingВнутрішні відступи й рамки можуть збільшити фактичний розмір елемента та спричинити горизонтальне прокручування. Часто зручно додати:
* {
box-sizing: border-box;
}Довгий рядок без пробілів, наприклад ідентифікатор або URL, може розширити колонку. Для текстового вмісту можна дозволити перенесення:
.card {
overflow-wrap: anywhere;
}Для більшості адаптивних сіток із картками достатньо такої структури:
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 16px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}Тут:
контейнер не виходить за межі батьківського елемента;
max-width обмежує надмірне розтягування на великих екранах;
auto-fit автоматично підбирає кількість колонок;
minmax(240px, 1fr) зберігає мінімальну ширину карток;
gap створює однакові проміжки між рядками та колонками.
auto-fit автоматично підбирає кількість колонок у CSS Grid.
Найчастіше його використовують у формулі:
repeat(auto-fit, minmax(мінімум, 1fr))minmax() задає мінімальну та максимальну ширину колонки.
Колонки переносяться на новий рядок без медіазапитів.
Значення мінімальної ширини потрібно підбирати відповідно до вмісту.
Для адаптивного контейнера варто використовувати width: 100% і за потреби max-width.
gap впливає на кількість колонок, які можуть поміститися в один рядок.