Спосіб 1 – display: grid
Якщо ви хочете, щоб блоки, розташовані в сітці за допомогою властивості display: grid, мали однакову висоту, можна використати властивість align-items зі значенням stretch. Наприклад:
|
1 2 3 4 5 |
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* задаємо три колонки */ align-items: stretch; /* вирівнюємо блоки за висотою */ } |
Ця властивість розтягує блоки в кожному рядку, щоб вони займали всю висоту рядка. Однак, якщо всередині блоків є контент з фіксованою висотою або контент, який не повинен бути розтягнутий, то може знадобитися додаткове налаштування.
Наприклад, якщо всередині блоків є елементи з абсолютною позицією, то потрібно задати блокам властивість position: relative, щоб вони були контекстом для абсолютно позиціонованих елементів.
Якщо всередині блоків є елементи з фіксованою висотою, то можна задати їм властивість height: 100%, щоб вони займали всю висоту блоку.
Іноді також може бути корисно задати фіксовану висоту для блоків або задати grid-auto-rows для сітки.
Спосіб 2 – display: flex
Якщо ви використовуєте властивість display: flex для розміщення блоків в ряд, щоб зробити їх однакової висоти, можна використовувати властивість align-items зі значенням stretch. Наприклад:
|
1 2 3 4 |
.flex-container { display: flex; align-items: stretch; /* вирівнюємо блоки за висотою */ } |
Спосіб 3 – JS
Можна використовувати JavaScript для вирівнювання висоти блоків. Наприклад, можна написати функцію, яка знаходить найбільшу висоту блока в рядку і задає цю висоту всім блокам у цьому рядку. Приклад:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function alignBlocks() { const rows = document.querySelectorAll('.grid-row'); rows.forEach(row => { let maxHeight = 0; row.querySelectorAll('.grid-item').forEach(item => { const height = item.offsetHeight; if (height > maxHeight) { maxHeight = height; } }); row.querySelectorAll('.grid-item').forEach(item => { item.style.height = maxHeight + 'px'; }); }); } // Викликаємо функцію при завантаженні сторінки та при зміні розмірів вікна window.addEventListener('load', alignBlocks); window.addEventListener('resize', alignBlocks); |
Це лише деякі з можливих способів вирівнювання блоків за висотою. Вибір способу залежить від конкретного завдання та вимог до сумісності та продуктивності.
Залишити відповідь