CSS Grid и Flexbox: эволюция макетов в веб-дизайне

В эпоху мобильного интернета, с его 60% пользователей, адаптивность и гибкость веб-дизайна стали ключевыми требованиями. CSS Grid и Flexbox, появившиеся в ответ на эти потребности в 2009 и 2017 годах соответственно, революционизировали подход к верстке, предлагая простые и мощные инструменты для создания сложных макетов.

Сегодня мы немного окунемся в историю введения и развития CSS Grid и Flexbox, а также рассмотрим, как эти технологии влияют на современные методы создания веб-макетов, какие у них преимущества и недостатки, и самое главное – какие технологии их заменят в будущем.

Немного истории

В начале 2000-х, когда веб-разработка ещё только набирала обороты, основными инструментами для создания макетов были таблицы и фреймы. Однако, к 2010 году использование таблиц для макетирования упало с 90% до менее чем 30%, уступая место более гибким методам, таким как позиционирование на основе float.

Однако, эти методы имели свои недостатки. Таблицы ограничивали творческие возможности дизайнеров и усложняли поддержку, а float-элементы, хотя и предоставляли больше гибкости, создавали сложности с адаптивным дизайном и порядком элементов. Это приводило к увеличению времени разработки и сложности кода. Исследование, проведенное в 2014 году, показало, что примерно 50% времени разработки веб-страницы тратилось именно на борьбу с ограничениями макета.

Flexbox и CSS Grid, две революционные технологии в мире веб-дизайна, были разработаны и внедрены разными людьми и организациями в разное время.

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

Flexbox был официально внедрен в рабочий черновик спецификации CSS в 2009 году World Wide Web Consortium (W3C). Первоначальная спецификация была написана Табом Аткинсом Jr. (работал в Google) и другими разработчиками.

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

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

CSS Grid был официально внедрен в спецификацию CSS W3C в 2017 году. Одним из ключевых разработчиков спецификации CSS Grid является Рейчел Эндрю (известная в профессиональных кругах эксперт по веб-разработке).

К 2017 году большинство основных браузеров обеспечили поддержку CSS Grid, что способствовало его широкому применению в веб-разработке.

Взгляд на статистику использования этих технологий показывает их растущую популярность. Согласно данным из отчета “State of CSS 2023”, более 80% веб-разработчиков регулярно используют Flexbox, а CSS Grid используют уже 70%.

Основные принципы и возможностиFlexbox

Flexbox (официальное название – CSS Flexible Box Layout) работает по принципу контейнера и элементов. Разработчики определяют flex-контейнер, внутри которого дочерние элементы (flex-элементы) могут быть гибко распределены по основным и поперечным осям.

Одно из ключевых преимуществ Flexbox — это возможность выравнивания элементов в контейнере и управления пространством между ними. Разработчики могут легко изменять порядок элементов, их выравнивание и заполнение, что делает Flexbox идеальным для адаптивных макетов.

Flexbox обеспечивает отличную поддержку адаптивного дизайна. С его помощью можно создавать макеты, которые легко адаптируются под различные размеры экранов и устройств, что особенно важно, учитывая, что по данным Statista, в 2023 году доля мобильного трафика в интернете составила около 54%.

Частые примеры использованияFlexbox

• Навигационные меню. Flexbox идеально подходит для создания горизонтальных или вертикальных навигационных меню, которые нуждаются в центрировании элементов или распределении пространства между ними (к примеру, можно посмотреть меню в шапке на моем сайте).  
• Карточки продуктов. В электронной коммерции Flexbox используется для выравнивания карточек продуктов, гарантируя, что все карточки имеют одинаковый размер и порядок, независимо от количества контента внутри каждой карточки.
• Футеры и заголовки. Создание универсальных футеров и заголовков, которые требуют распределения элементов и выравнивания, также является сильной стороной Flexbox.

Основные характеристики ивозможности CSS Grid

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

CSS Grid ввел концепцию фракционных единиц (fr), позволяющих разделить доступное пространство на доли, что значительно упрощает создание гибких макетов, адаптирующихся под разные размеры экрана.

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

Примеры использования CSS Grid

• Онлайн-галереи и портфолио. CSS Grid позволяет легко создавать сложные галереи изображений с различными размерами элементов, обеспечивая гармоничное и эстетически привлекательное распределение контента. Например, для фотографа или художника это означает возможность создать портфолио, где работы разных размеров и форматов смотрятся естественно и гармонично.
• Новостные сайты и блоги. С использованием CSS Grid, можно создавать сложные макеты с множеством столбцов и строк, которые идеально подходят для размещения разнообразного контента на новостных сайтах. Например, на главной странице новостного сайта можно удобно расположить статьи, рекламные блоки, видео и анонсы мероприятий, используя различные шаблонные области для каждого типа контента.
• Электронная коммерция. Интернет-магазины, использующие CSS Grid, могут создавать более гибкие и адаптивные страницы продуктов. Например, макет страницы может автоматически корректироваться в зависимости от количества и размера продуктов, обеспечивая лучший пользовательский опыт и удобство навигации.

Прошлое vs реальность

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

Что делает разработчик сейчас

1. CSS Grid для основной структуры. Страницу можно разделить на несколько основных областей (шапка, основное содержание, боковая панель, подвал) с помощью CSS Grid. Каждая область задается как сеточная ячейка в двумерной сетке, что позволяет легко управлять расположением и размерами этих областей.
2. Flexbox для внутреннего контента. Внутри каждой секции можно использовать Flexbox для выравнивания и распределения элементов, таких как список товаров. Это позволяет элементам гибко адаптироваться к разным размерам экранов, обеспечивая отличный UX как на мобильных устройствах, так и на десктопах.

Как делали олды

1. Ранее для создания основной структуры страницы часто использовались таблицы. Это приводило к неупорядоченному и чрезмерно сложному HTML-коду, ограничивало гибкость дизайна и затрудняло реализацию адаптивных макетов.
2. Чтобы выстроить товары в ряды и колонки, разработчики использовали float. Этот метод требовал дополнительного кода для корректного расположения элементов и часто вызывал проблемы с переполнением контента, требуя дополнительных усилий для поддержания структуры макета.

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

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

Конечно, верстальщики пытались находить выходы из ситуаций (к примеру, использовали clearfix hack), но кода тогда ставало чуть ли не в 2 раза больше.

Взгляд в будущее

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

Однако, в мире веб-технологий постоянно происходят инновации, и уже сейчас есть несколько направлений, которые могут внести изменения в будущее веб-макетирования:

• Развитие CSS-стандартов. CSS продолжает развиваться, и в будущем мы можем ожидать новых свойств и возможностей, которые еще больше упростят и улучшат процесс создания макетов. Например, новые формы CSS-логики (например, CSS Container Queries) уже обсуждаются и разрабатываются, что позволит создавать еще более адаптивные и реактивные макеты.
• Улучшения в области доступности и производительности. Будущее веб-дизайна также будет сосредоточено на улучшении доступности и производительности веб-страниц. Это приведет к появлению новых стандартов, которые будут влиять на то, как мы создаем макеты.
• Искусственный интеллект и автоматизация. Развитие ИИ и машинного обучения приведет к появлению инструментов, которые автоматически оптимизируют макеты или предлагают улучшения, основанные на анализе пользовательского поведения и доступности.

• Веб-компоненты и модульный дизайн. Продолжающаяся популяризация веб-компонентов и стремление к модульности в дизайне 100% повлияют на подходы к макетированию. Возможно, будущее лежит в еще более декомпозированных и повторно используемых макетах.
• Технологии виртуальной и дополненной реальности. Развитие VR и AR создаст новые возможности и вызовы для веб-дизайнеров и разработчиков. Это потребует новых подходов к верстке, которые учитывают трехмерное пространство и взаимодействие пользователя.

Дмитрий Евсеенков