Почему я перестал использовать Bootstrap?

Bootstrap слишком многословный: вам нужно наплодить много div’ов, даже если вам нужно сделать в макете всего два блока.

Дела становятся еще хуже, когда вы добавляете адаптивность

Или когда вы хотите переместить блоки

Сетка Bootstrap ограничена 12-ю колонками

По-дефолту, у Boostrap 10px внутренние отступы, которые довольно сложно переписать.

Bootstrap должен скачиваться пользователем, что тормозит ваш сайт.

Как создать разметку для сайта без Bootstrap?

Предположим, у вас есть следующий шаблон, который вам нужно интегрировать:

bootstrap vs cssgrid

Как бы это выглядело с Bootstrap:

<body>
<div class="container">
<div class="row">
<div class="col-12 header">…</div>
</div>
<div class="row">
<div class="col-4 navigation-menu">…</div>
<div class="col-8 main-content">…</div>
</div>
<div class="row">
<div class="col-12 footer">…</div>
</div>
</div>
</body> 

Хоть у вас всего четыре блока, вам понадобилось аж 9 div’ов, чтобы закодить ваш шаблон.

Как бы просто это выглядло с CSS Grid

Спасибо гридам, вы можете получить тот же результат с помощью всего четырёх div’ов.

<body>
<div class="container">
<div class="header">…</div>
<div class="navigation-menu">…</div>
<div class="main-content">…</div>
<div class="footer">…</div>
</div>
</body> 

Хотя это не так просто как с импортом в Bootstrap, вам надо будет добавить некоторые дополнительные CSS стили.

.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.header {
grid-column: span 12;
}
.navigation-menu {
grid-column: span 4;
}
.main-content {
grid-column: span 8;
}
.footer {
grid-column: span 12;
}

На примере выше, вы сначала определили 12-ти колоночный контейнер в гридах. А затем выстовили количество строк, через которые будет проходить элемент.

Что там у нас с адаптивностью?

Более того, скорее всего вам понадобится адаптивность шаблона под сматрфоны и планешты.

css grid

С Bootstrap это будет выглядеть так.

Чем сложнее становится дизайн, тем сложнее и запутанее становится ваш HTML c всё большим и большим количеством классов:

<body>
<div class="container">
<div class="row">
<div class="col-xs-12 header">…</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-4 navigation-menu">…</div>
<div class="col-xs-12 col-md-6 col-lg-8 main-content">…</div>
</div>
<div class="row">
<div class="col-xs-12 footer">…</div>
</div>
</div>
</body> 

На CSS Grid

Если вы хотите добавить адаптивность вашему шаблону, то впринципе нет нужды в замене HTML.

Вам только лишь надо добавить некоторые медиа запросы в ваш CSS.

…
@media screen and (max-width: 768px) {
.navigation-menu {
grid-column: span 6;
}
.main-content {
grid-column: span 6;
}
}
@media screen and (max-width: 480px) {
.navigation-menu {
grid-column: span 12;
}
.main-content {
grid-column: span 12;
}
} 

А как насчет подвигать блоки?

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

bootstrap

На Bootstrap это бы выглядело так. Вам надо было бы продублировать ваше меню, спрятать одно и показывать другое на мобильных телефонах, а другое на десктопах соответственно.

<body>
<div class="container">
<div class="row">
<div class="col-xs-12 hidden-sm-up navigation-menu-mobile">…</div>
<div class="col-xs-12 header">…</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 hidden-xs-down navigation-menu">…</div>
<div class="col-xs-12 col-md-6 col-lg-8 main-content">…</div>
</div>
<div class="row">
<div class="col-xs-12 footer">…</div>
</div>
</div>
</body> 

И само собой, HTML станет все больше и сложнее с ростом шаблона.

С CSS Grid

Вам нужна только одна строчка CSS, чтобы передвинуть меню навигации наверх и вот как:

…
@media screen and (max-width: 480px) {
.navigation-menu {
grid-row: 1;
grid-column: span 12;
}
…
}

Настриваем ваш грид шаблон!

Имейте столько колонок, сколько хотите.

По-дефолту, Bootstrap идет с 12-ти колоночной системой сеток. Это значение может быть переписано, но если вы так сделаете, это будет переписано везде в приложении.

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

В grid-template-columns: repeat(12, 1fr); вы можете просто указать число колонок, которые вы хотите вместо 12ти.

Нежелательные 10px внутренние отступы

Колонки в Bootstrap имеют 10px внутренние отступы слева и справа. Самое лучшее решение тут, это переписать их используя padding-right: 0 !important; и padding-left: 0 !important;

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

Больше нет нужды скачивать библиотеку

Даже если таблица стилей Bootstrap весит всего несколько килобайт, она затормозит загрузку вашей страницы.

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

На время написания статьи, уже 89% браузеров поддерживали CSS Grid.

bootstrap