Как сделать колонки одинаковой высоты
Короткий ответ
В flex-контейнере элементы строки по умолчанию растягиваются до высоты самого высокого:
<style>
.row { display: flex; gap: 12px; }
.row div { flex: 1; padding: 12px; background: lavender; border-radius: 8px; }
</style>
<div class="row">
<div>Short</div>
<div>A much longer text that takes several lines in this column.</div>
<div>Medium text here</div>
</div>За это отвечает значение по умолчанию align-items: stretch, так что ничего дописывать не нужно. В grid ячейки одной строки тоже растягиваются сами.
Кнопка внизу карточки
Карточки одной высоты, но кнопки стоят на разном уровне? Сделайте карточку колонкой и прижмите кнопку margin-top: auto:
<style>
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cards article { display: flex; flex-direction: column; padding: 12px; background: whitesmoke; }
.cards button { margin-top: auto; }
</style>
<div class="cards">
<article><p>Basic plan</p><button>Buy</button></article>
<article><p>Pro plan with many extra features listed here</p><button>Buy</button></article>
</div>Частая ошибка
Высота перестаёт выравниваться, если задать элементам align-items: center или align-self с другим значением, а также фиксированную height. Для одинаковой высоты оставьте stretch и не задавайте высоту — пусть её определяет самый длинный текст.
Функции из этого ответа
- align-items — Выравнивает элементы поперёк главной оси — в ряду это по вертикали.
- flex — Сокращённая запись того, как flex-элемент растёт, сжимается и с какого размера начинает.
- flex-direction — Направление главной оси flex-контейнера: элементы в ряд или в столбик.