Пошук уроків, статей та іншого контенту
Порівняємо auto-fill і auto-fit та визначимо, як вони поводяться за недостатньої кількості елементів.
auto-fill і auto-fitauto-fill і auto-fit — це спеціальні ключові слова CSS Grid, які використовують у функції repeat() для створення адаптивних колонок:
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));Обидва значення дозволяють браузеру автоматично визначати кількість колонок залежно від ширини контейнера.
Різниця стає помітною, коли в контейнері недостатньо елементів, щоб заповнити всі доступні колонки.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>auto-fill та auto-fit</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px;
font-family: Arial, sans-serif;
background: #f3f4f6;
}
.examples {
display: grid;
gap: 24px;
max-width: 900px;
margin: 0 auto;
}
.example {
padding: 16px;
background: white;
border: 2px solid #d1d5db;
border-radius: 8px;
}
.example h2 {
margin-top: 0;
font-size: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.grid--fit {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.card {
min-height: 100px;
display: grid;
place-items: center;
padding: 16px;
color: white;
background: #2563eb;
border-radius: 6px;
font-weight: bold;
}
</style>
</head>
<body>
<main class="examples">
<section class="example">
<h2>auto-fill</h2>
<div class="grid">
<div class="card">Елемент 1</div>
<div class="card">Елемент 2</div>
</div>
</section>
<section class="example">
<h2>auto-fit</h2>
<div class="grid grid--fit">
<div class="card">Елемент 1</div>
<div class="card">Елемент 2</div>
</div>
</section>
</main>
</body>
</html>Спробуйте змінювати ширину вікна браузера. За достатньої ширини контейнера в ньому буде місце для кількох колонок, але фактичних елементів лише два.
У верхньому прикладі використано auto-fill, а в нижньому — auto-fit.
auto-fillauto-fill створює стільки колонок, скільки може поміститися в контейнері, навіть якщо для деяких колонок немає елементів.
.grid {
grid-template-columns: repeat(
auto-fill,
minmax(160px, 1fr)
);
}Браузер:
визначає, скільки колонок мінімальною шириною 160px може поміститися;
створює ці колонки;
розміщує елементи в доступних колонках;
залишає порожні колонки, якщо елементів недостатньо.
Наприклад, якщо контейнер може вмістити чотири колонки, але є лише два елементи, сітка логічно матиме чотири колонки:
[Елемент 1] [Елемент 2] [порожня] [порожня]Порожні колонки займають простір. Тому на екрані елементи можуть залишитися вузькими та розташуватися на початку рядка.
auto-fitauto-fit також створює стільки колонок, скільки може поміститися, але після розміщення елементів стискає порожні колонки до нульового розміру.
.grid {
grid-template-columns: repeat(
auto-fit,
minmax(160px, 1fr)
);
}Якщо в контейнері може поміститися чотири колонки, але є лише два елементи, порожні колонки буде «підігнано»:
[Елемент 1] [Елемент 2]Вільний простір розподілиться між наявними елементами. Через це вони можуть стати ширшими.
У спрощеному вигляді поведінка така:
auto-fill:
[елемент] [елемент] [порожня] [порожня]
auto-fit:
[елемент ] [елемент ]Точніше:
auto-fill зберігає порожні створені колонки;
auto-fit стискає порожні колонки;
auto-fill може залишити вільний простір у порожніх колонках;
auto-fit використовує доступний простір для розширення наявних елементів.
minmax()Найчастіше обидва значення використовують разом із minmax():
grid-template-columns: repeat(
auto-fit,
minmax(200px, 1fr)
);Тут:
auto-fit автоматично визначає кількість колонок;
200px — мінімальна ширина колонки;
1fr — максимальна ширина колонки, яка може збільшуватися, щоб зайняти доступний простір.
Цей запис означає:
Створюй стільки колонок, скільки поміщається, але не роби колонку вужчою за
200px. Якщо залишився вільний простір, розподіляй його між колонками.
Різниця між auto-fill і auto-fit особливо помітна за таких умов:
контейнер достатньо широкий для кількох колонок;
елементів менше, ніж можливих колонок;
колонки використовують гнучку максимальну ширину, наприклад 1fr.
Якщо елементів достатньо, щоб заповнити всі доступні колонки, результат часто буде однаковим:
.grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}Коли кожна створена колонка має елемент, порожніх колонок немає, тому auto-fit нічого не стискає.
Щоб побачити різницю чіткіше, можна додати фон самому grid-контейнеру:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Порівняння auto-fill та auto-fit</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px;
font-family: Arial, sans-serif;
background: #e5e7eb;
}
.wrapper {
max-width: 900px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
padding: 12px;
background: #bfdbfe;
border: 2px solid #2563eb;
border-radius: 8px;
}
.grid--fit {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
margin-top: 24px;
}
.card {
min-height: 100px;
display: grid;
place-items: center;
background: #1d4ed8;
color: white;
border-radius: 6px;
}
h2 {
margin: 0 0 8px;
font-size: 20px;
}
</style>
</head>
<body>
<main class="wrapper">
<h2>auto-fill</h2>
<div class="grid">
<div class="card">Елемент 1</div>
<div class="card">Елемент 2</div>
</div>
<h2>auto-fit</h2>
<div class="grid grid--fit">
<div class="card">Елемент 1</div>
<div class="card">Елемент 2</div>
</div>
</main>
</body>
</html>Блакитний простір навколо карток допомагає побачити, як розподіляється ширина контейнера. За достатньої ширини вікна картки з auto-fit зазвичай стають ширшими, оскільки порожні колонки не зберігаються.
auto-fit, якщоПотрібно, щоб наявні елементи займали весь доступний простір:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}Це типовий вибір для:
карток товарів;
карток статей;
блоків із функціями продукту;
галерей із невідомою кількістю елементів.
auto-fill, якщоВажливо зберігати структуру потенційних колонок навіть тоді, коли деякі з них порожні:
.calendar {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
}У такому випадку порожні треки можуть бути частиною очікуваної структури сітки.
Для більшості сіток із картками достатньо такого CSS:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}Він забезпечує:
автоматичну кількість колонок;
мінімальну ширину картки 220px;
розширення карток на вільному просторі;
перехід до нових рядків на вузьких екранах;
відсутність необхідності вручну задавати медіазапити для кожної ширини.
auto-fit із пропорційним масштабуваннямauto-fit не змінює мінімальну ширину колонки. Її задає друга частина minmax():
minmax(200px, 1fr)Якщо замінити 200px на 300px, колонок поміщатиметься менше.
minmax()Такий запис:
grid-template-columns: repeat(auto-fit, 1fr);не задає корисної мінімальної ширини колонки. Для адаптивних карток зазвичай краще явно вказувати мінімальне значення:
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));Якщо кожна можлива колонка вже містить елемент, auto-fill і auto-fit часто виглядають однаково. Різниця проявляється саме тоді, коли є порожні колонки.
Якщо мінімальна ширина колонки більша за ширину контейнера, адаптивна сітка може поводитися не так, як очікується:
grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));Для невеликих екранів краще вибирати реалістичне мінімальне значення або перевіряти результат у браузері.
auto-fill створює всі колонки, які можуть поміститися, і зберігає порожні.
auto-fit стискає порожні колонки та розширює колонки з наявними елементами.
Обидва значення найчастіше використовують із repeat() і minmax().
Якщо елементів достатньо для всіх колонок, різниця майже непомітна.
Для адаптивних карток зазвичай зручніший шаблон:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));auto-fill варто обирати, коли важливо зберегти структуру доступних колонок навіть за недостатньої кількості елементів.