Пошук уроків, статей та іншого контенту
Навчимося створювати колонки сітки, задавати їхню кількість і ширину за допомогою grid-template-columns.
grid-template-columnsВластивість grid-template-columns задає структуру колонок CSS Grid:
кількість колонок;
ширину кожної колонки;
спосіб розподілу доступного простору між колонками.
Властивість потрібно застосовувати до батьківського елемента з display: grid.
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
}У цьому прикладі створюється сітка з трьох колонок, кожна завширшки 200px.
Найпростіший спосіб — вказати ширину кожної колонки окремо:
.grid {
display: grid;
grid-template-columns: 150px 150px 150px;
}Тут сітка має три колонки:
перша — 150px;
друга — 150px;
третя — 150px.
Якщо елементів більше, ніж вказано колонок, додаткові елементи переходять на наступний рядок.
frДля гнучких колонок у CSS Grid використовують одиницю fr. Вона означає частину вільного простору сітки.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}Три колонки отримають однакову ширину. Такий запис часто використовують для створення сітки з однакових колонок.
Запис:
grid-template-columns: 1fr 1fr 1fr;можна скоротити за допомогою функції repeat():
grid-template-columns: repeat(3, 1fr);Обидва варіанти створюють три однакові колонки.
repeat()Функція repeat() приймає два основні аргументи:
repeat(кількість, значення)Наприклад:
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}Це означає: створити чотири колонки, кожна з яких займає однакову частину доступної ширини.
Також за допомогою repeat() можна створити колонки фіксованої ширини:
.grid {
display: grid;
grid-template-columns: repeat(3, 180px);
}У цьому випадку буде три колонки завширшки 180px.
Для кожної колонки можна задати окреме значення:
.grid {
display: grid;
grid-template-columns: 200px 1fr 100px;
}У цьому прикладі:
перша колонка має ширину 200px;
третя колонка має ширину 100px;
друга колонка займає весь простір, що залишився.
Можна використовувати кілька частин fr:
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
}Вільний простір розподіляється у співвідношенні 1:2:
перша колонка отримує одну частину;
друга — дві частини.
Тобто друга колонка буде вдвічі ширшою за першу.
Значення px і fr можна комбінувати:
.grid {
display: grid;
grid-template-columns: 240px 1fr;
}Перша колонка завжди має ширину 240px, а друга займає решту доступного простору.
Такий варіант зручний, наприклад, для бічної панелі та основного вмісту:
.layout {
display: grid;
grid-template-columns: 220px 1fr;
}grid-template-columns визначає ширину колонок, але не відстань між ними. Для відстані використовують властивість gap:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}Відстань 16px буде і між колонками, і між рядками.
Якщо потрібно задати окремі відстані, використовують column-gap і row-gap:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 24px;
row-gap: 16px;
}Нижче наведено повний приклад сітки з трьома однаковими колонками:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Колонки CSS Grid</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px;
font-family: Arial, sans-serif;
background-color: #f2f4f7;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 900px;
margin: 0 auto;
}
.card {
padding: 24px;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
.card h2 {
margin-top: 0;
}
</style>
</head>
<body>
<main class="grid">
<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>Правило:
grid-template-columns: repeat(3, 1fr);створює три колонки. Оскільки карток чотири, четверта картка автоматично переходить у другий рядок.
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}.container {
display: grid;
grid-template-columns: 240px 1fr;
}.container {
display: grid;
grid-template-columns: 1fr 300px;
}.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}Середня колонка буде вдвічі ширшою за кожну з бічних колонок.
display: gridgrid-template-columns не працюватиме як властивість сітки, якщо батьківський елемент не має display: grid.
Неправильно:
.container {
grid-template-columns: repeat(3, 1fr);
}Правильно:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}grid-template-columns задає колонки;
grid-template-rows задає рядки.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
}Якщо задати колонки лише в пікселях, вони можуть не поміститися на вузькому екрані:
.container {
display: grid;
grid-template-columns: 400px 400px 400px;
}Для гнучких сіток часто краще використовувати fr:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}1fr1fr не означає фіксовану ширину. Це частина доступного простору. Якщо змінюється ширина контейнера, ширина колонки також змінюється.
Створіть сітку для чотирьох карток:
увімкніть CSS Grid;
зробіть дві однакові колонки;
додайте проміжок 20px;
додайте чотири елементи;
перевірте, як четвертий елемент переходить у другий рядок.
Основне правило має виглядати так:
.cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}grid-template-columns задає кількість і ширину колонок.
Для створення Grid потрібно додати display: grid.
1fr розподіляє доступний простір між колонками.
repeat(3, 1fr) створює три однакові гнучкі колонки.
Значення колонок можна комбінувати: 200px 1fr.
Співвідношення 1fr 2fr створює колонки, де друга вдвічі ширша за першу.
Для відстані між колонками та рядками використовують gap.