Почему CSS Grid лучше, чем фреймворк Bootstrap?

3
18447
Добавить в избранное

Рассказываем, как CSS Grid позволяет создавать качественную адаптивную разметку, не прибегая к сторонним фреймворкам вроде Bootstrap.

Нативная сетка дает многочисленные преимущества в сравнении с фреймворками, особенно хорошо это видно при сравнении с самым популярным из них: Bootstrap. Благодаря тому, что современный CSS позволяет создавать сложную разметку без необходимости применять JavaScript, код становится чище, и его проще поддерживать.

Разметка может быть проще

Замена Bootstrap на CSS Grid сделает HTML чище. В качестве примера рассмотрим небольшой кусок страницы, которую нам предстоит сверстать, выглядит она так:

Layout example

Bootstrap

Для начала рассмотрим пример кода для этой страницы на Bootstrap.

Bootstrap layout

Есть несколько вещей, на которые следует обратить внимание:

— Каждый ряд должен располагаться в собственном div.
— Необходимо использовать названия классов для создания разметки (col-xs-2).
— Поскольку шаблон будет расти и усложняться, тоже произойдет и с HTML-кодом.

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

Bootstrap classes

CSS Grid

Теперь рассмотрим тот же пример разметки на чистом CSS:

CSS Grid layout

Такая разметка читается куда легче. Ушло нагромождение классов и сократилось количество div.

Конечно, в отличие от примера c подключенным к странице Bootstrap, здесь нужно самостоятельно описать стили:

Grid layoute styles

Больше гибкости

Давайте поработаем над адаптивностью. Для примера, уберем MENU в верхний ряд для мобильных экранов. Другими словами, изменим это:

Layout example basic

На это:

Layout example mobile

CSS Grid

CSS сетка перестроится очень просто. Все, что нужно – просто добавить media query и описать, что должно произойти с элементами страницы.

Grid layout adaptive styles

Таким образом, чтобы переделать страницу, не нужно даже открывать HTML.

Bootstrap

Если разработчику понадобится изменить что-то в Bootstrap-шаблоне, придется начать с изменения самого HTML. Фактически, необходимо сдвинуть MENU, чтобы оно оказалось над HEADER.

Bootstrap block iterations

В этом случае просто изменить поведение стилей в media query не выйдет. Чтобы решить эту нужно прибегать к помощи JavaScript.

Больше нет лимита в 12 колонок

Не то чтобы это серьезное ограничение, но в некоторых случаях доставляет неудобства. Поскольку сетка Bootstrap базово разделена на 12 колонок, могли возникнуть проблемы с разделением, к примеру, на 5, 7 или 9 колонок.

CSS Grid позволяет сделать в ряду столько колонок, сколько потребуется.

Grid layoud example

Это делается через установку значения свойства grid-template-columns:

Grid layout example in code

К слову, Bootstrap 4 использует flexbox, что позволяет также легко управляться с разметкой через CSS, но на данный момент он еще даже не вышел из беты.

Поддержка браузерами

На момент написания этой заметки 75% процентов браузеров поддерживают CSS Grid.

Browser support

Множеству разработчиков ничто не мешает начать использовать CSS Grid прямо сейчас, но, к сожалению, не все проекты готовы работать с этим методом разметки. Тем не менее, многие известные разработчики, такие как Morten Rand-Eriksen из LinkedIn и Jen Simmons из Mozilla убеждены, что в именно за таким подходом в формировании страниц будущее: визуальное представление должно быть отделено от JavaScript-логики и адаптироваться независимо от него.

Интересуетесь фронтендом?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




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

  1. В Bootstrap разметке вес col-* можно было в одну row запихнут и через order свойство менять порядок в медиа запросах

  2. […] Сетки, наконец, стали стандартом для CSS и браузеры быстро к нему адаптируются. Раньше сетки создавались с помощью табличной верстки, flex, inline-block и выравниваний. Основное отличие встроенных сеток в том, что они автоматически делят документ на секции и позволяют задавать столбцы и строки для контента. […]

Оставьте комментарий