![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_GExAbQYr_tSQ5-HlmtG4lw.png\")
Лично я считаю, что в плане веба, Bootstrap ещё рано полностью заменять на CSS Grid. Но перевел эту статью с точки зрения перспективы на будущее, которое уже далеко не за горами.
\n\n\n\n\n\n\n\nBootstrap требует слишком много писанины: вам нужно наплодить много div’ов, даже если вам нужно сделать в макете всего два блока.
Дела становятся еще хуже, когда вы добавляете адаптивность
\n\n\n\nИли когда вы хотите переместить блоки
\n\n\n\nСетка Bootstrap ограничена 12-ю колонками
\n\n\n\nПо дефолту, у Boostrap 10px внутренние отступы, которые довольно сложно переписать.
Bootstrap должен скачиваться со стороны пользователя, что тормозит ваш сайт.
\n\n\n\nПредположим, что у вас есть следующий шаблон, который вам нужно интегрировать:
\n\n\n\n<body>\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-12 header\">...</div>\n </div>\n <div class=\"row\">\n <div class=\"col-4 navigation-menu\">...</div>\n <div class=\"col-8 main-content\">...</div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 footer\">...</div>\n </div>\n </div>\n</body>Хоть у вас всего четыре блока, вам понадобилось аж 9 div’ов, чтобы закодить ваш шаблон.
Спасибо гридам, вы можете получить тот же результат с помощью всего четырёх div’ов.
<body>\n <div class=\"container\">\n <div class=\"header\">...</div>\n <div class=\"navigation-menu\">...</div>\n <div class=\"main-content\">...</div>\n <div class=\"footer\">...</div>\n </div>\n</body>Хоть это не так просто как с импортом в Bootstrap, но вам надо будет добавить некоторые дополнительные CSS стили.
\n\n\n\n.container {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n}\n.header {\n grid-column: span 12;\n}\n.navigation-menu {\n grid-column: span 4;\n}\n.main-content {\n grid-column: span 8;\n}\n.footer {\n grid-column: span 12;\n}На примере выше, вы сначала определили 12-ти колоночный контейнер в гридах. А затем выставили количество строк, через которые будет проходить элемент.
\n\n\n\nБолее того, помимо простой версии, скорее всего вам понадобится адаптивность шаблона не только под смартфоны, но и под планшеты.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_GyKr6Hd8wKnQC_ACgq5IXQ.png\")
Чем сложнее становится дизайн, тем сложнее и запутанней становится ваш HTML c всё большим и большим количеством классов:
\n\n\n\n<body>\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-xs-12 header\">...</div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-12 col-md-6 col-lg-4 navigation-menu\">...</div>\n <div class=\"col-xs-12 col-md-6 col-lg-8 main-content\">...</div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-12 footer\">...</div>\n </div>\n </div>\n</body>Если вы хотите добавить адаптивность вашему шаблону, то впринципе нет нужды в замене HTML.
\n\n\n\nВам только лишь надо добавить некоторые медиа запросы в ваш CSS:
\n\n\n\n...\n@media screen and (max-width: 768px) {\n .navigation-menu {\n grid-column: span 6;\n }\n .main-content {\n grid-column: span 6;\n }\n}\n@media screen and (max-width: 480px) {\n .navigation-menu {\n grid-column: span 12;\n }\n .main-content {\n grid-column: span 12;\n }\n}Скажем, к примеру, что вместо на мобильных устройствах вы хотите навигационную панель над шапкой:
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/1_ndnFvkhKgfhMqrOY9YdE7A.png\")
На Bootstrap это бы выглядело так. Вам надо было бы продублировать ваше меню, спрятать одно и показывать другое на мобильных телефонах, а другое на десктопах соответственно.
\n\n\n\n<body>\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-xs-12 hidden-sm-up navigation-menu-mobile\">...</div>\n <div class=\"col-xs-12 header\">...</div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6 col-lg-4 hidden-xs-down navigation-menu\">...</div>\n <div class=\"col-xs-12 col-md-6 col-lg-8 main-content\">...</div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-12 footer\">...</div>\n </div>\n </div>\n</body>И само собой, HTML станет все больше и сложнее с ростом шаблона.
\n\n\n\nВам нужна только одна строчка CSS, чтобы передвинуть меню навигации наверх и вот как:
\n\n\n\n...\n@media screen and (max-width: 480px) {\n .navigation-menu {\n grid-row: 1;\n grid-column: span 12;\n }\n ...\n}Имейте столько колонок, сколько хотите.
\n\n\n\nПо-дефолту, Bootstrap идет с 12-ти колоночной системой сеток. Это значение может быть переписано, но если вы так сделаете, это будет переписано везде в приложении.
\n\n\n\nС другой стороны, с CSS Grid, вы можете указать количество колонок на строку для каждого вашего грида.
\n\n\n\nВ grid-template-columns: repeat(12, 1fr); вы можете просто указать число колонок, которые вы хотите вместо 12ти.
Колонки в Bootstrap имеют 10px внутренние отступы слева и справа. Самое лучшее решение тут, это переписать их используя padding-right: 0 !important; и padding-left: 0 !important;
С CSS Grid шаблоном, вам надо контролировать все CSS классы, вы можете выставлять внутренние отступы везде где вам надо.
\n\n\n\nДаже если таблица стилей Bootstrap весит всего несколько килобайт, она затормозит загрузку вашей страницы.
\n\n\n\nВсе основные браузеры поставляются с поддержкой CSS Grid, начиная с 2017, так что нет нужды скачивать какие-либо дополнительные CSS, чтобы использовать гриды.
\n\n\n\nНа время обновления статьи, уже 95.47% браузеров поддерживали CSS Grid.
\n\n\n\n![\"\"](\"https://stasonmars.ru/wp/wp-content/uploads/2021/02/Screenshot-2021-02-09-at-17.43.08-1024x403.png\")
В этой статье вы узнаете как можно заменить сетку на Bootstrap, сделав её на CSS Grid
\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/gridbootstrpafnksdnf.jpg"},"interesting":[{"title":"Как я перестал использовать Bootstrap в угоду CSS Grid","slug":"kak-ya-perestal-ispolzovat-bootstrap-v-ugodu-css-grid","type":"html-css"}]}},"staticQueryHashes":["3576131997","63159454"]}