Пошук уроків, статей та іншого контенту
Розглянемо вирівнювання всієї сітки й окремих елементів за допомогою justify-items, align-items і place-items.
У CSS Grid є два рівні вирівнювання:
Елементи всередині своїх grid-областей — за допомогою justify-items і align-items.
Вміст усієї сітки всередині grid-контейнера — за допомогою justify-content і align-content.
Цей урок присвячено першому рівню: justify-items, align-items і скороченій властивості place-items.
justify-itemsіalign-itemsзадаються grid-контейнеру, але впливають на його дочірні grid-елементи.
Вирівнювання в Grid використовує два логічні напрямки:
inline axis — зазвичай горизонтальний напрямок;
block axis — зазвичай вертикальний напрямок.
Тому:
justify-items вирівнює елементи по inline axis;
align-items вирівнює елементи по block axis.
У звичайній горизонтальній писемності це можна уявляти так:
justify-items: ліворуч ← → праворуч
align-items: зверху ↑ ↓ знизуНапрямки залежать від режиму писемності документа, тому логічні назви надійніші за прив’язку до фізичних left, right, top і bottom.
justify-itemsjustify-items визначає горизонтальне, точніше inline-вирівнювання елементів у межах їхніх grid-областей.
Найуживаніші значення:
start — на початку inline axis;
end — у кінці inline axis;
center — по центру;
stretch — розтягнути елемент на всю доступну ширину області.
Значення stretch є типовим для grid-елементів. Воно працює, якщо ширина елемента не задана явно через width або інші обмеження.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}У цьому прикладі кожен елемент буде розташований по центру своєї колонки.
justify-items.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.grid--start {
justify-items: start;
}
.grid--center {
justify-items: center;
}
.grid--end {
justify-items: end;
}
.grid--stretch {
justify-items: stretch;
}Якщо колонки ширші за самі елементи, різниця між значеннями буде помітною. Якщо елемент і так займає всю ширину колонки, center або end можуть не дати видимого результату.
align-itemsalign-items визначає вертикальне, точніше block-вирівнювання елементів у межах їхніх grid-областей.
Основні значення:
start — на початку block axis;
end — у кінці block axis;
center — по центру;
stretch — розтягнути елемент на всю доступну висоту області.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 160px;
align-items: center;
}Тепер елементи будуть розташовані по вертикальному центру своїх областей висотою 160px.
Якщо висота рядка визначається самим вмістом, у ньому може не бути вільного вертикального простору. Тоді значення start, center і end візуально можуть здаватися однаковими.
Вільний простір можна створити, наприклад, за допомогою:
.grid {
display: grid;
grid-template-rows: repeat(2, 140px);
align-items: center;
}Або через мінімальну висоту контейнера:
.grid {
display: grid;
min-height: 320px;
align-items: center;
}place-itemsplace-items є скороченням для одночасного задання:
align-items
justify-itemsПорядок значень такий:
place-items: align-items justify-items;Наприклад:
.grid {
place-items: center;
}Одне значення застосовується до обох властивостей:
.grid {
align-items: center;
justify-items: center;
}Ці записи рівнозначні.
Якщо значення два, вони задають різні напрямки:
.grid {
place-items: start end;
}Це означає:
.grid {
align-items: start;
justify-items: end;
}Отже:
перше значення place-items — для block axis;
друге значення — для inline axis.
Розглянемо картки, які потрібно розташувати по центру своїх grid-областей.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Вирівнювання в CSS Grid</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px;
font-family: sans-serif;
background: #f1f5f9;
}
.products {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 180px;
gap: 16px;
place-items: center;
max-width: 720px;
margin: 0 auto;
}
.product {
width: 140px;
min-height: 100px;
padding: 20px;
border-radius: 12px;
background: #2563eb;
color: white;
text-align: center;
}
.product h2 {
margin: 0 0 8px;
font-size: 20px;
}
.product p {
margin: 0;
}
</style>
</head>
<body>
<section class="products" aria-label="Список товарів">
<article class="product">
<h2>Кава</h2>
<p>250 грн</p>
</article>
<article class="product">
<h2>Чай</h2>
<p>180 грн</p>
</article>
<article class="product">
<h2>Какао</h2>
<p>220 грн</p>
</article>
<article class="product">
<h2>Сік</h2>
<p>120 грн</p>
</article>
<article class="product">
<h2>Вода</h2>
<p>45 грн</p>
</article>
<article class="product">
<h2>Лимонад</h2>
<p>150 грн</p>
</article>
</section>
</body>
</html>У цьому прикладі:
grid-auto-rows: 180px створює достатньо вертикального простору;
width: 140px робить картки вужчими за їхні колонки;
place-items: center центрує картки і горизонтально, і вертикально.
Якби width і min-height карток не обмежували їхній розмір, типове розтягування могло б займати всю доступну grid-область.
stretch і явні розміри елементівТипове значення для align-items і justify-items — stretch.
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 120px;
justify-items: stretch;
align-items: stretch;
}Елементи намагатимуться заповнити свої grid-області.
Однак stretch не завжди збільшує елемент. Наприклад, на результат можуть вплинути:
задані width або height;
max-width або max-height;
зовнішні відступи;
вміст, який визначає мінімальний розмір;
інші обмеження розміру.
Для компактних карток часто зручно явно задати їхню ширину, а потім використати place-items: center.
justify-items і align-items застосовуються до всіх дочірніх елементів контейнера. Якщо потрібно змінити вирівнювання лише одного елемента, використовують:
justify-self;
align-self;
place-self.
Наприклад:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 140px;
place-items: center;
}
.grid__item--special {
justify-self: end;
align-self: start;
}Більшість елементів залишиться по центру, а .grid__item--special буде розташований:
у кінці inline axis;
на початку block axis.
Скорочений варіант:
.grid__item--special {
place-self: start end;
}Порядок у place-self такий самий:
place-self: align-self justify-self;Важливо: place-self змінює вирівнювання конкретного елемента, тому має пріоритет над відповідними налаштуваннями контейнера для цього елемента.
Не слід плутати:
.grid {
justify-items: center;
align-items: center;
}із:
.grid {
justify-content: center;
align-content: center;
}justify-items і align-items вирівнюють елементи в межах їхніх областей.
justify-content і align-content вирівнюють усю сітку разом, якщо в контейнері є вільний простір.
Наприклад, якщо колонки займають лише частину ширини контейнера:
.grid {
display: grid;
grid-template-columns: repeat(2, 180px);
justify-content: center;
}Тут дві колонки, як єдина сітка, будуть розташовані по центру контейнера. Властивість justify-items впливала б на елементи всередині кожної з цих колонок.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 120px;
place-items: center;
}Це зручно для:
іконок;
коротких підписів;
кнопок;
невеликих карток.
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
place-items: center start;
}Еквівалентний запис:
.grid {
align-items: center;
justify-items: start;
}.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 120px;
place-items: center stretch;
}Еквівалентний запис:
.grid {
align-items: center;
justify-items: stretch;
}Елементи розтягуються по ширині своїх областей, але центруються по висоті.
place-itemsНеправильно думати, що перше значення відповідає горизонтальному напрямку:
.grid {
place-items: end center;
}Це означає:
.grid {
align-items: end;
justify-items: center;
}Тобто перше значення стосується align-items, а друге — justify-items.
Якщо grid-область має таку саму висоту, як елемент, align-items: center не матиме помітного ефекту.
Перевірте розмір рядків:
.grid {
grid-auto-rows: 160px;
}justify-items перемістить усю сіткуjustify-items не переміщує колонки. Вона вирівнює елементи всередині колонок.
Для позиціонування всієї сітки використовують justify-content.
Якщо в елемента є:
.card {
width: 200px;
}то justify-items: stretch не змусить його автоматично зайняти всю ширину області. Явний width обмежує розмір елемента.
left і right замість логічних значеньДля Grid зазвичай краще використовувати:
justify-items: start;
justify-items: end;а не намагатися описувати вирівнювання лише через фізичні напрямки. Логічні значення краще працюють у різних режимах писемності.
justify-items вирівнює всі grid-елементи по inline axis.
align-items вирівнює всі grid-елементи по block axis.
place-items — скорочення для цих двох властивостей.
У place-items: align justify перше значення відповідає align-items, друге — justify-items.
Типове значення — stretch.
Для помітного вирівнювання потрібен вільний простір усередині grid-області.
justify-items і align-items працюють із елементами в комірках, а justify-content і align-content — з усією сіткою.
Для одного елемента використовують justify-self, align-self або place-self.