Олександра Донцова Front-end Developer у Sigma Software, Викладач Комп'ютерної школи Hillel.

Інтерфейс користувача (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 Приклад макету

На Рис.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 відповідно).
Властивістю 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, не більше та не менше.

Рис. 2 Приклад рядка з 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 і без використання медіа-запитів.

Рис. 3 Приклад макету на планшеті

Рис. 4 Приклад макету на мобільному телефоні