Как расположить блоки произвольной высоты в колонки?

Для расположения блоков произвольной высоты в колонки в HTML можно использовать несколько подходов. Рассмотрим два наиболее популярных метода - с использованием CSS Grid и с использованием Flexbox.

Метод 1: CSS Grid

CSS Grid предоставляет мощные инструменты для создания сетки, в которой можно легко располагать элементы в колонки.

1. Создайте контейнер, который будет содержать блоки, и примените к нему свойство display: grid.

<div class="container">
   <div class="block">Блок 1</div>
   <div class="block">Блок 2</div>
   <div class="block">Блок 3</div>
   ...
</div>

.container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-gap: 10px;
}

2. Определите шаблон колонок с помощью свойства grid-template-columns. В данном примере мы использовали repeat(auto-fit, minmax(250px, 1fr)), что означает, что колонки будут автоматически выстраиваться друг под другом, и каждая колонка будет иметь минимальную ширину в 250 пикселей и занимать доступное пространство (1fr).

3. Добавьте отступы между блоками с помощью свойства grid-gap. Значение 10px задает расстояние в 10 пикселей между блоками.

Теперь блоки будут автоматически выстраиваться в колонки, их высота может быть произвольной.

Метод 2: Flexbox

Flexbox также предоставляет удобные средства для создания гибких и адаптивных макетов, в том числе и для расположения блоков в колонки.

1. Создайте контейнер, который будет содержать блоки, и примените к нему свойство display: flex.

<div class="container">
   <div class="block">Блок 1</div>
   <div class="block">Блок 2</div>
   <div class="block">Блок 3</div>
   ...
</div>

.container {
   display: flex;
   flex-wrap: wrap;
}

2. Укажите, что блоки должны обтекать друг друга с помощью свойства flex-wrap: wrap.

3. Определите гибкость элементов внутри контейнера с помощью свойства flex или flex-grow, чтобы они занимали доступное пространство в колонке (если вы хотите, чтобы все блоки имели одинаковую ширину, вы можете использовать flex: 1 0 250px, где 250px - это минимальная ширина блока).

Теперь элементы будут выстраиваться в колонки, и их высота может быть произвольной.

Оба метода имеют свои особенности и могут использоваться в зависимости от конкретного проекта и требований. CSS Grid обладает большей гибкостью, но может быть несовместим с некоторыми старыми браузерами. Flexbox более поддерживаемый и легкий в использовании, но менее мощный.