Дима Яковлев

Простой пример сетки на CSS Flexbox

Постепенно приближается релиз фреймворка Bootstrap 5. Главное, что принёс Bootstrap веб-разработчикам, по моему мнению - удобство работы с сетками в эпоху CSS свойства float. Однако, с тех пор CSS не стоял на месте. CSS Flexbox и CSS Grid, CSS переменные и CSS функции, cделали повсеместное использование Bootstap для работы с сетками анахронизмом. Предлагаю простой, но работающий, пример двенадцати-колоночной сетки на CSS Flexbox с использованием CSS функции calc().

CSS код, в котором происходит вся магия свойства display: flex:

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

.col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
    flex: 0 0 100%;
}

@media (min-width: 576px) {
    .col-11 {
        flex: 0 0 calc(100% / 12 * 11);
    }
    .col-10 {
        flex: 0 0 calc(100% / 12 * 10);
    }
    .col-9 {
        flex: 0 0 calc(100% / 12 * 9);
    }
    .col-8 {
        flex: 0 0 calc(100% / 12 * 8);
    }
    .col-7 {
        flex: 0 0 calc(100% / 12 * 7);
    }
    .col-6 {
        flex: 0 0 calc(100% / 12 * 6);
    }
    .col-5 {
        flex: 0 0 calc(100% / 12 * 5);
    }
    .col-4 {
        flex: 0 0 calc(100% / 12 * 4);
    }
    .col-3 {
        flex: 0 0 calc(100% / 12 * 3);
    }
    .col-2 {
        flex: 0 0 calc(100% / 12 * 2);
    }
    .col-1 {
        flex: 0 0 calc(100% / 12);
    }
}

HTML код, привычный всем пользователям сетки Bootstrap:

<div class="row">
    <div class="col-12">...</div>
    <div class="col-4">...</div>
    <div class="col-8">...</div>
</div>

Живой пример такой сетки.

Для демонстрации возможностей и красоты современного CSS можно было бы добавить в код сетки CSS переменные, и CSS функции min(), max(), и даже clamp(), но это тема для отдельного разговора о том, как можно сделать сетку универсальнее, не сильно увеличивая объём кода.

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

После распространения поддержки браузерами свойства gap для flex упростится работа с отступами элементов сетки. А пока познакомиться и представить практические возможности использования свойства gap можно исходя из документации.