Пошук уроків, статей та іншого контенту
Скоротимо повторення треків у шаблоні сітки за допомогою функції repeat().
repeat()Функція repeat() скорочує запис повторюваних треків у CSS Grid. Вона приймає кількість повторень і шаблон треків:
repeat(кількість, шаблон)Наприклад, замість:
grid-template-columns: 1fr 1fr 1fr;можна записати:
grid-template-columns: repeat(3, 1fr);Обидва варіанти створюють сітку з трьома колонками однакової ширини.
Функція repeat() найчастіше використовується для визначення колонок:
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}Це означає:
створити 4 колонки;
кожна колонка має розмір 1fr;
вільний простір розподіляється між колонками порівну.
Без repeat() цей самий шаблон виглядав би так:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}repeat() можна використовувати не лише для колонок, а й для рядків:
.grid {
display: grid;
grid-template-rows: repeat(3, 100px);
}У цьому випадку створюються три рядки висотою 100px кожен.
Розмір можна комбінувати з іншими одиницями:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 120px);
}Сітка матиме три однакові колонки та два рядки висотою 120px.
Другий аргумент repeat() може містити не один, а кілька треків:
.grid {
display: grid;
grid-template-columns: repeat(2, 200px 1fr);
}Такий запис розгортається в:
.grid {
grid-template-columns: 200px 1fr 200px 1fr;
}Тобто шаблон 200px 1fr повторюється двічі.
Це корисно, коли сітка має регулярний чергуваний шаблон:
.grid {
display: grid;
grid-template-columns: repeat(3, 100px 200px);
}Результат:
grid-template-columns: 100px 200px 100px 200px 100px 200px;<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Сітка з repeat()</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 32px;
font-family: Arial, sans-serif;
background-color: #f1f5f9;
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 900px;
margin: 0 auto;
}
.card {
padding: 24px;
border-radius: 12px;
background-color: white;
box-shadow: 0 4px 12px rgb(15 23 42 / 10%);
}
.card h2 {
margin-top: 0;
font-size: 20px;
}
.card p {
margin-bottom: 0;
color: #475569;
line-height: 1.5;
}
@media (max-width: 700px) {
.cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 450px) {
.cards {
grid-template-columns: 1fr;
}
}
</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>Grid</h2>
<p>Побудова двовимірних сіток.</p>
</article>
<article class="card">
<h2>Flexbox</h2>
<p>Розташування елементів в одному напрямку.</p>
</article>
</main>
</body>
</html>За ширини вікна понад 700px сітка має три колонки:
grid-template-columns: repeat(3, 1fr);На менших екранах кількість колонок змінюється:
grid-template-columns: repeat(2, 1fr);А на дуже вузьких екранах усі картки розміщуються в одній колонці:
grid-template-columns: 1fr;Коли перший аргумент є числом, кількість повторень фіксована:
grid-template-columns: repeat(3, 1fr);Браузер завжди створює три колонки.
CSS Grid також підтримує ключові слова auto-fit та auto-fill як перший аргумент repeat():
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));Це означає:
створювати стільки колонок, скільки поміщається в контейнері;
мінімальна ширина колонки — 180px;
колонки можуть розтягуватися до 1fr;
кількість колонок автоматично змінюється залежно від доступної ширини.
Приклад:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Адаптивна сітка</title>
<style>
body {
margin: 0;
padding: 24px;
font-family: Arial, sans-serif;
background-color: #e2e8f0;
}
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
max-width: 1000px;
margin: 0 auto;
}
.product {
min-height: 140px;
padding: 20px;
border-radius: 10px;
background-color: #ffffff;
}
.product h2 {
margin: 0 0 8px;
}
</style>
</head>
<body>
<section 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>
</section>
</body>
</html>Функція minmax() тут задає допустимий діапазон розміру колонки:
minmax(180px, 1fr)Колонка не стає меншою за 180px, але може збільшуватися, щоб заповнити доступний простір.
auto-fit і auto-fillОбидва ключові слова дають змогу створювати адаптивні колонки:
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));Їхня поведінка схожа, але є відмінність:
auto-fit розтягує наявні елементи, якщо в рядку залишилося вільне місце;
auto-fill зберігає потенційні порожні треки, тому наявні елементи можуть не розтягуватися так само.
Для більшості адаптивних сіток карток зручно починати з auto-fit.
repeat() з іншими трекамиrepeat() можна поєднувати з треками, які не повторюються:
.layout {
display: grid;
grid-template-columns: 240px repeat(3, 1fr) 120px;
}Цей шаблон створює:
першу колонку шириною 240px;
три гнучкі колонки;
останню колонку шириною 120px.
Також можна використовувати повторення на початку або в кінці шаблону:
.layout {
display: grid;
grid-template-columns: repeat(2, 150px) 1fr;
}Результат:
grid-template-columns: 150px 150px 1fr;grid-template-columns: repeat(3, 1fr);Це створює три колонки, а не обмежує сітку трьома елементами. Якщо елементів більше, вони перейдуть у наступні рядки.
display: gridВластивість grid-template-columns працює для grid-контейнера:
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
}Без display: grid шаблон колонок не застосовується.
У виразі:
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));значення 180px має відповідати реальному вмісту. Якщо воно занадто велике, у контейнері поміщатиметься менше колонок. Якщо занадто мале, вміст може ставати тісним.
auto-fit без minmax()Запис:
grid-template-columns: repeat(auto-fit, 1fr);не задає корисного мінімального розміру колонок. Для адаптивних карток зазвичай потрібна комбінація:
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));Створіть сітку з шести елементів і виконайте такі вимоги:
На широкому екрані елементи мають розташовуватися у чотирьох колонках.
Відстань між елементами має бути 20px.
Ширина колонок має розподілятися порівну.
На вузькому екрані сітка має переходити до двох колонок.
Використайте repeat() в обох правилах.
Базова частина CSS:
.items {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 700px) {
.items {
grid-template-columns: repeat(2, 1fr);
}
}repeat() скорочує запис повторюваних треків CSS Grid.
Синтаксис функції: repeat(кількість, шаблон).
repeat(3, 1fr) створює три однакові гнучкі колонки.
Другий аргумент може містити кілька треків, наприклад repeat(2, 200px 1fr).
Для адаптивних сіток використовують auto-fit або auto-fill.
Комбінація repeat(auto-fit, minmax(...)) дає змогу автоматично змінювати кількість колонок залежно від ширини контейнера.
repeat() працює для колонок і рядків grid-контейнера.