Пользовательский интерфейс (User Interface) — это то, с чем взаимодействует пользователь на любом сайте. Очень важно, чтобы ваш сайт выглядел не только эстетично и функционально, но и чтобы интерфейс был интуитивно понятным. Высокопроизводительный, отзывчивый и визуально приятный пользовательский интерфейс является обязательным для успешного веб-сайта.
Есть множество инструментов для создания адаптивного и отзывчивого веб-сайта, с помощью которых можно легко разместить основные элементы пользовательского интерфейса. Именно поэтому выбор правильного инструмента для верстки пользовательского интерфейса является важным этапом разработки, а также определяет простоту его создания.
В этой статье я решила сравнить два очень популярных инструментов для создания сетки макетов — CSS Grid и Bootstrap. Но для начала давайте немного разберем, что это такое и как работает.
Что такое CSS Grid
CSS Grid — это двумерная система сетки, которая очень удобна в использовании при верстке макетов и больших сегментов страницы. Сетка состоит из горизонтальных и вертикальных линий, образующих строки и столбцы, как в таблице.
В отличие от Flexbox, Grid позволяет работать сразу в двух осях, нам не нужно оборачивать отдельные блоки в еще один блок-контейнер для того, чтобы менять направление оси, как это делается в Flexbox. Использование CSS Grid для размещения элементов пользовательского интерфейса помогает точно расположить их, что полезно для реализации адаптивного дизайна сайта. CSS Grid использует для расположения элементов пиксели, фракции и проценты, что дает возможность очень просто адаптировать одну и ту же веб-страничку в соответствии с размером экрана разных устройств, например, телефонов, планшетов и ноутбуков.
CSS Grid играет важную роль в создании макетов веб-страниц, которые способствуют быстрому отклику. Это один из самых удобных инструментов для создания кроссплатформенных сайтов, также облегчающий верстку привлекательных страничек, которые очень нравятся пользователям.
Как работает CSS Grid?
Как уже говорилось выше, CSS Grid делит пространство на две оси, что позволяет создавать нужное количество строк и столбцов, которые можно зафиксировать по ширине и высоте с помощью пикселей или указать долю пространства с помощью фракций (1fr, 2fr..).
Понятие фракции появилось именно с внедрением Grid-ов в CSS и часто используется для создания адаптивных и кроссплатформенных макетов.
Давайте разберем такой пример вполне стандартного макета для страничек:
На Рис.1 я сверстала базовый макет для веб-странички, где есть Header, Navigation, Main, Aside, Footer — основные семантические теги.
Вот как будет выглядеть в этом случае мой HTML:
<div class="wrap">
<header class="header">THIS IS HEADER</header>
<nav class="nav">THIS IS NAVIGATION</nav>
<main class="main">THIS IS MAIN</main>
<aside class="aside">THIS IS ASIDE</aside>
<footer class="footer">THIS IS FOOTER</footer>
</div>И CSS с использованием гибкой сетки:
body {
margin: 0;
}
.wrap {
font-size: 40px;
color: white;
display: grid;
grid-template-columns: 300px 1fr 200px;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
.header {
background-color: red;
grid-area: header;
}
.nav {
background-color: yellow;
grid-area: nav;
}
.main {
background-color: blueviolet;
grid-area: main;
}
.aside {
background-color: green;
grid-area: aside;
}
.footer {
background-color: blue;
grid-area: footer;
}Давайте разберем, что происходит в коде выше:
В первую очередь мы дали родительскому контейнеру свойство display: grid.
Затем с помощью свойства grid-template-columns: 300px 1fr 200px; определила, что на странице у нас будет 3 колонки (300px, auto, 200px cоответсвенно).
Свойством grid-template-areas было указано то, как именно должны располагаться элементы относительно сетки.
Обратите внимание, что нам не пришлось оборачивать теги nav, main, aside в еще один отдельный блок, чтобы разместить их в одну строку, и это позволило нам своего рода писать код кратко и понятно. Также огромным преимуществом такой сетки в том, что ячейки растягиваются автоматически, в зависимости от контента, что лежит в контейнере (например как в main).
Что такое Bootstrap?
Bootstrap — это бесплатный фреймворк, содержащий набор инструментов HTML, CSS и JavaScript, используемых для создания веб-сайтов. Это гибкая система, которая обеспечивает кросс-браузерную совместимость и позволяет быстро верстать адаптивные дизайны. В этой статье мы поговорим только о Bootstrap Grid, чтобы понять, в чем же разница между двумя видами сеток.
Bootstrap имеет адаптивную сетку с возможностью ее настраивать под нужные размеры. Он предлагает дизайн, ориентированный на мобильные устройства, который позволяет адаптировать единый код для нескольких устройств, таких как телефоны, планшеты и настольные компьютеры. Подобно Grid CSS, Bootstrap также дает возможность работать сразу в двух осях — горизонтальной и вертикальной, образующих строки и столбцы.
Как работает Bootstrap Grid
В отличие от CSS Grid, в Bootstrap Grid элементы столбцов (с классом col) располагаются внутри каждой строки (с классом row), таким образом создавая горизонтальную группу столбцов.
Столбцы должны быть непосредственно дочерними элементами соответствующих строк, в которые они помещаются. В одной строке максимальное количество столбцов должно быть 12, не больше и не меньше.
Ниже представлен HTML-код, в стили я всего лишь подключила одну ссылку из документации Bootstrap.
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div class="col">10</div>
<div class="col">11</div>
<div class="col">12</div>
</div>Bootstrap предлагает четыре уровня классов, а именно xs, sm, md и lg, которые классифицируются следующим образом в зависимости от размера устройства:
xs — для телефонов размером < 76px.
sm — для планшетов размером > 768px и < 992px
md — для десктопов размером > 992px и < 1200px
lg — для больших экранов размером > 1200px
Эта классификация по размеру устройства помогает реализовать адаптивность веб-сайта для устройств разных размеров, чтобы обеспечить пользовательский интерфейс с точностью до пикселя.
Давайте рассмотрим пример создания такой же странички, как мы делали выше (Рис.1), в этот раз с помощью Bootstrap.
<div class="row">
<div class="col-12 header">THIS IS HEADER</div>
</div>
<div class="row">
<div class="col-3 nav">THIS IS NAVIGATION</div>
<div class="col-7 main">THIS IS MAIN</div>
<div class="col-2 aside">THIS IS ASIDE</div>
</div>
<div class="row">
<div class="col-12 footer">THIS IS FOOTER</div>
</div>А также этот же макет, только уже адаптированный к мобильной (Рис. 3) версии и планшетной (Рис. 4):
<div class="row">
<div class="col-12 header">THIS IS HEADER</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 navg">THIS IS NAV</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-7 main">THIS IS MAIN THIS IS MAIN THIS IS MAIN</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-2 aside">THIS IS ASIDE</div>
</div>
<div class="row">
<div class="col-12 footer">THIS IS FOOTER</div>
</div>На изображениях ниже видно, как блоки перестраиваются и очень просто адаптируются к размеру экрана без лишних затрат усилий на написание дополнительного CSS и без использования медиа-запросов.
CSS Grid против Bootstrap
Вот сравнение этих двух систем сеток:
Критерии | CSS Grid | Bootstrap |
Разметка | Имеет более понятную, читабельную разметку. Макет сетки не определяется в HTML, а выполняется в CSS. | Требуется тег div для каждой строки и для каждого столбца с уникальным классом. Это делает код более длинным и иногда менее понятным. |
Количество столбцов | Предлагает гибкую компоновку без ограничений по столбцам. Можно задавать любое количество столбцов. | Поскольку сетка разделена на 12 столбцов, любой макет, в котором не 12 столбцов, трудно реализовать. |
Адаптивность | Даже если HTML останется прежним, просто добавьте разные медиа-запросы в CSS и определите макет сетки для каждого элемента HTML. | Можно определить макет области контента индивидуально для разных размеров устройств, используя определенные классы. Но это делает разметку более громоздкой, так как увеличивает количество классов div . |
Скорость загрузки страницы | Хорошо поддерживается большинством браузеров и версий. Скорость загрузки страницы выше. | Должны быть загружены файлы стилей, что замедляет скорость загрузки страницы. |
Что все-таки лучше?
Чтобы создать веб-приложение, которое будет радовать клиентов, важно обеспечить правильную визуальную привлекательность на разных платформах и устройствах.
Bootstrap предлагает больше, чем систему сеток, и представляет собой набор инструментов для внешнего интерфейса, способный создавать сложные адаптивные дизайны с помощью классов.
С другой стороны, CSS Grid — это простая и гибкая система сеток, в которой применяется кросс-совместимый дизайн, обеспечивающий отличное взаимодействие с пользователем. Таким образом, использование CSS Grid в сравнении с Bootstrap имеет смысл использовать при реализации простых макетов.
