CSS-Grid VS Flexbox

0

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

Не так давно разметка для всех страниц HTML выполнялась с помощью таблиц, свойства float и других свойств CSS, которые не очень хорошо подходили для моделирования сложных веб-страниц.
Затем появился flexbox – режим разметки, который был специально разработан для создания надежных адаптивных страниц. Flexbox упростил выравнивание элементов и их содержимого, и в настоящее время является предпочтительной системой CSS большинства веб-разработчиков.
Теперь у нас появился новый претендент на трофей с лучшей системой для сборки-html-макетов (название трофея находится в процессе разработки). Это мощная CSS-grid, и к концу этого месяца она будет доступна в браузерах Firefox 52 и Chrome 57, а вскоре в других браузерах (надеюсь).

Базовый тест

Чтобы понять, что это такое - создавать макеты с каждой системой, мы создадим одну и ту же HTML-страницу дважды - один раз с помощью flexbox и еще один раз с CSS grid. Вы можете скачать оба проекта или просмотреть их в этой демонстрационной онлайн-версии:

CSS vs. Grid
Демо

Дизайн довольно простой - он состоит из центрированного контейнера, внутри которого у нас есть заголовок, главный раздел, боковая панель и футер. Вот основные «проблемы», которые мы должны решить, сохраняя CSS и HTML как можно более чистыми:

  1. Разместить четыре основные секции на макете
  2. Сделать страницу адаптивной (sidebar должен уходить вниз основного контента на меньших экранах)
  3. Выровнять содержимое заголовка - навигация слева, кнопка справа.

Как вы можете видеть, ради сравнения мы сделали все очень просто. Начнем с проблемы номер один.

Задача 1: Позиционирование разделов страницы

Решение Flexbox
Мы начнем с решения flexbox. Добавляем display: flex в контейнер и направляем его дочерние элементы по вертикали. Это позиционирует все разделы друг под другом.

.container {
    display: flex;
    flex-direction: column;
}

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


    

Теперь установим элементы wrapper display:flex и flex-direction в противоположном направлении.

.main-and-sidebar-wrapper {
    display: flex;
    flex-direction: row;
}  

Последний шаг — установить размер основного раздела и сайдбара. Мы хотим, чтобы он был в три раза больше сайдбара, что не сложно сделать с помощью flex или процентов.

.main {
    flex: 3;
    margin-right: 60px;
}
.sidebar {
   flex: 1;
}

Как вы можете видеть flexbox справился с этим очень хорошо, но, тем не менее, нам было необходимо применить множество свойств CSS + добавить дополнительный элемент HTML. Давайте теперь посмотрим, как с этим справится CSS Grid.

Решение CSS Grid

Существует пара разных способов использования CSS Grid, но мы будем использовать grid-template-areas синтаксис, так как он выглядит наиболее подходящим для того, что мы планируем сделать.
Для начала определим четыре grid-area, по одному на каждую секцию страницы.

    
        
    
        header {
    grid-area: header;
}
.main {
    grid-area: main;
}
.sidebar {
    grid-area: sidebar;
}
footer {
    grid-area: footer;
}
    

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


.container {
    display: grid;

    /*  Определим размер и число колонок нашей сетки. 
    fr работает подобно flex. fr поделит свободное пространствно в строке пропорционально их значению.
    У нас две колонки - первая будет в три раза больше второй. */
    grid-template-columns: 3fr 1fr;

    /*   Назначим области сетки определенным местам на сетке. 
       Первая строка - header.
       Вторая будет поделена между main и sidebar.
       Последняя для footer.  */
    grid-template-areas: 
        "header header"
        "main sidebar"
        "footer footer";

    /*  Оступы между ячейками сетки будут 60 пикселей. */
    grid-gap: 60px;
}

И вот свершилось! Наша разметка теперь соответствует структуре, определенной выше и благодаря тому, как мы её настроили нам не придется иметь дело с внешними и внутренними отступами.

Задача 2: Сделать страницу адаптивной

Решение Flexbox

Выполнение этого шага напрямую связано с предыдущим. Для этого решения мы должны будем изменить flex-direction wrapper’а и подогнать некоторые отступы.

@media (max-width: 600px) {
    .main-and-sidebar-wrapper {
        flex-direction: column;
    }

    .main {
        margin-right: 0;
        margin-bottom: 60px;
    }
}

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

Решение CSS

С того момента, когда мы определили grid-areas нам остается только изменить их порядок в медиа-запросе. Для этого мы можем использовать ту же настройку столбцов.


@media (max-width: 600px) {
    .container {
    /*  Realign the grid areas for a mobile layout. */
        grid-template-areas: 
            "header header"
            "main main"
            "sidebar sidebar"
            "footer footer";
    }
}

Или мы можем переопределить весь макет с нуля, если посчитаем это более чистым решением.


@media (max-width: 600px) {
    .container {
        /*  Redefine the grid into a single column layout. */
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "main"
            "sidebar"
            "footer";
    }
}

Задача 3: выровнять элементы заголовка

Решение Flexbox

Наш header содержит некоторые ссылки навигации и кнопку. Мы хотим, чтобы навигация была слева, а кнопка справа. Ссылки внутри nav должны быть точно выровнены по отношению друг к другу.


    

Мы уже делали подобную разметку с flexbox в одной из предыдущих статей.

Техника очень проста:

header {
    display: flex;
    justify-content: space-between;
}

Сейчас навигация и кнопка отлично выровнены. Все что осталось сделать — это установить элементы внутри

МЕРОПРИЯТИЯ

Комментарии 0

ВАКАНСИИ

Добавить вакансию
Junior Data Developer
Москва, от 100000 RUB до 140000 RUB
QA Engineer
Москва, от 100000 RUB до 160000 RUB
DevOps Engineer
Москва, от 4000 USD до 7000 USD

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

BUG