Как сделать колонки одинаковой высоты на Flex/Grid?

Question

Accepted Answer

## Почему это «бесплатно»

И Flex, и Grid по умолчанию тянут элементы ряда до высоты самого высокого в линии (stretch по cross/block axis).

```css
.row {
  display: flex;
  gap: 1rem;
}
.col { /* height: 100% не нужен */
  display: flex;
  flex-direction: column;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch; /* default */
}
```

## Подводные камни

- У flex-item `align-self: flex-start` отменит равную высоту.
- Вложенный контент «на всю высоту карточки» — часто `flex: 1` у тела карточки или Grid `1fr` на ряд контента.
- Float-колонки равной высоты — устаревший хак; на интервью лучше Flex/Grid.

## Итог

Равная высота колонок — нормальное поведение Flex/Grid; ломают её осознанные `align-*` и старые float-схемы.