Web
21758

CSS-Grid VS Flexbox

Статья раскроет, как и где лучше использовать тот или иной инструмент, так как 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;
}

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

РУБРИКИ В СТАТЬЕ

Комментарии

BUG
LIVE