Одинаковая высота блоков CSS

Одинаковая высота блоков является важным аспектом веб-дизайна во многих случаях. Когда блоки на веб-странице имеют разную высоту, это может создавать неравномерный и несбалансированный внешний вид, что, в свою очередь, может негативно сказываться на пользовательском опыте. Поэтому мы задействуем свойства CSS, чтобы создать привлекательный и симметричный внешний вид страницы.

Когда это может пригодиться:

При создании сеток с блоками, например, для отображения на Landing Page преимуществ, услуг, выравнивание высоты блоков позволяет создать ровные и привлекательные ряды, что улучшает внешний вид.

При создании колонок с текстом, например, для блога или новостной ленты, одинаковая высота блоков поможет создать ровные столбцы, что улучшит визуальный эффект.

В данной статье мы рассмотрим несколько способов достижения одинаковой высоты блоков с помощью CSS. Мы будем использовать, как классические, так и современные методы, которые помогут вам создавать эффективные и стильные веб-страницы с равномерно выровненными блоками.

Одинаковая высота блоков с помощью flex

Посмотреть демо

Использование Flexbox для установки одинаковой высоты блоков довольно просто и эффективно. Но есть один недостаток, который может стать огромным минусом. Дело в том, что вычитание высоты происходит не по сетке, а из ряда.

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

<div class="container">
    <div class="box">
        <div class="box_content">текст</div>
    </div>
    <div class="box">
        <div class="box_content">текст</div>
    </div>
    <div class="box">
        <div class="box_content">текст</div>
    </div>
</div>

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

.box {
    display: flex;
    padding: 10px;
    width: 33.3333333333%;
}
.box_content {
    background: #666;
    border-radius: 10px;
    display: flex;
    padding: 20px;
    color: #fff;
}

Второй вариант

Есть и другой вариант, который может оказаться полезным, если первый по каким-то причинам не подошел. Это использовать свойство flex: 1, что означает, что каждый блок будет занимать равную долю доступного пространства. На примере это выглядит так:

Посмотреть демо

<div class="container">
    <div class="box">
        <div class="box_content">текст</div>
    </div>
    <div class="box">
        <div class="box_content">текст</div>
    </div>
    <div class="box">
        <div class="box_content">текст</div>
    </div>
</div>

.container {
    display: flex;
}

.box {
    flex: 1;
    display: flex;
    padding: 10px;
}
.box_content {
    background: #666;
    border-radius: 10px;
    padding: 20px;
    color: #fff;
}

Одинаковая высота блоков с помощью grid

Посмотреть демо

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

Свойство display: grid применяем к контейнеру, чтобы установить его в режим сетки. Затем мы используем grid-template-columns: repeat(3, 1fr), чтобы определить, что у нас будет 3 колонки с равной шириной (1fr означает равную долю доступного пространства). grid-gap: 20px задает отступы между блоками. Смотрите, как это на примере.

<div class="container">
    <div class="box">
        текст
    </div>
    <div class="box">
        текст
    </div>
    <div class="box">
        текст
    </div>
</div>

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-bottom: 50px;
}

.box {
    background: #666;
    border-radius: 10px;
    padding: 20px;
    color: #fff;
}

@media (max-width:720px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width:470px) {
    .container {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: auto;
    }
}

Для адаптивности просто меняйте количество колонок в свойстве grid-template-columns.

grid-template-columns: repeat(1, 1fr); // 1 колонка
grid-template-columns: repeat(2, 1fr); // 2 колонки
grid-template-columns: repeat(3, 1fr); // 3 колонки

Одинаковая высота блоков с помощью table

Посмотреть демо

В этом примере мы будем применять правила таблицы к тегам div. И стоит подчеркнуть, что использование таблиц для макета может иметь некоторые ограничения в гибкости и адаптивности. Лучше всего рассмотреть альтернативные подходы, такие как использование CSS Grid или Flexbox. Они более современные и гибкие методы для создания макетов.

О них говорилось выше. А этот пример с таблицей просто служит демонстрацией того, что есть такой классический вариант. И кто знает, может именно он вам и нужен. Но в нем есть минус – его высота ровна каждому в своем ряде, а не в целой сетке.

<div class="container">
    <div class="row">
        <div class="block">текст</div>
        <div class="block">текст</div>
        <div class="block">текст</div>
    </div>
    <div class="row">
        <div class="block">текст</div>
        <div class="block">текст</div>
        <div class="block">текст</div>
    </div>
</div>

.container {
    display: table;
    width: 100%;
    border-spacing: 20px;
}

.row {
    display: table-row;
}
.block {
    display: table-cell;
    width: 33.33%;
    background-color: #666;
    padding: 20px;
    vertical-align: middle;
    color: #fff;
    border-radius: 10px;
}