Дмитрійчук А. І. CSS Grid Layout – наступний крок у CSS // Міжнародний науковий журнал "Інтернаука". — 2017. — №9.
Технічні науки
УДК 811.93
Дмитрійчук Антон Ігорович
студент
Національного технічного університету України
«Київський політехнічний інститут імені Ігоря Сікорського»
Дмитрийчук Антон Игоревич
студент
Национального технического университета Украины
«Киевский политехнический институт имени Игоря Сикорского»
Dmytriichuk A.
student
National Technical University of Ukraine
«Igor Sikorsky Kyiv Polytechnic Institute»
CSS GRID LAYOUT – НАСТУПНИЙ КРОК У CSS
CSS GRID LAYOUT – СЛЕДУЮЩИЙ ШАГ В CSS
CSS GRID LAYOUT – THE NEXT STEP IN CSS
Анотація: Виконано огляд модулю CSS Grid Layout для побудови інтерфейсів на основі двовимірної сітки.
Ключові слова: CSS3, CSS Grid Layout.
Аннотация: Выполнено обзор модуля CSS Grid Layout для построения интерфейсов на основе двумерной сетки.
Ключевые слова: CSS3, CSS Grid Layout.
Summary: Overview of CSS Grid Layout for building interfaces based on two-dimensional grid.
Key words: CSS3, CSS Grid Layout.
Grid Layout – двовимірна макетна модель на основі сітки для CSS, яка надає потужні можливості контролю розмірів і позиціювання блоків, та їх контенту. CSS завжди використовувався для компонування елементів веб-сторінки, але ніколи повністю не справлявся зі своєю задачею. Розробникам доводилось використовувати таблиці, плавучі блоки, позиціювання та вбудовані блоки, але всі ці методи по своїй суті хаки, і їм бракує важливої частини функціональності. З появою Flexbox процес розробки став значно легше, але ця технологія все ще призначена для розміщення блоків у лише одному напрямку. Grid Layout став першою технологією призначеною для вирішення проблеми побудови макету сторінки.
Розпочнемо з підтримки модуля Grid Layout браузерами. За даними веб-сервісу caniuse.com [2] на сьогодні (28.06.2017) модуль підтримується 69.3 відсотками пристроїв по всьому світу, і з кожним днем їх кількість зростає. Версії браузерів, які підтримують технологію вказано у табл. 1.
Таблиця 1
Підтримка браузерами CSS Grid Layout
|
Браузер |
Версія |
Повна підтримка |
|
IE |
11 |
- |
|
Edge |
15 |
- |
|
Firefox |
54 |
+ |
|
Chrome |
59 |
+ |
|
Safari |
10.1 |
+ |
|
Opera |
46 |
+ |
|
iOS Safari |
10.3 |
+ |
|
Android Browser |
56 |
+ |
|
Chrome for Android |
59 |
+ |
(складено автором на основі [2])
Перш ніж розпочинати роботу з Grid слід розуміти основні терміни.
Grid container – набір горизонтальних та вертикальних grid ліній, які перетинаються та розділяють простір grid контейнера на grid області, у які можуть бути поміщені grid елементи.
Grid lines – вертикальні та горизонтальні роздільники grid контейнера. Знаходять по обидві сторони від стовпчика або рядка. Нумерація починається з одиниці. Для кожної лінії можна задати унікальне ім’я або числовий індекс, для подальшого використання.
Grid track – простір між двома grid лініями, тобто стовпчик чи рядок.
Grid cell – найменший елемент Grid контейнера. Утворюється при перетині стовпчика та рядка.
Grid area – простір всередині Grid контейнера, який може охоплювати одну, або більше клітинок.
Розглянемо приклад побудови макету для наступної HTML розмітки:
<div class="container">
<div class="b1">First</div>
<div class="b2">Second</div>
<div class="b3">Third</div>
<div class="b4">Fourth</div>
<div class="b5">Fifth</div>
<div class="b6">Sixth</div>
</div>
Для контейнера задамо наступні стилі:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
grid-auto-rows: minmax(80px, auto);
}
Властивість display: grid задає новий контекст форматування grid для контейнера. grid-template-columns: repeat(3, 1fr) задає кількість стовпців та їх ширину. Для задання проміжків між стовпцями та рядками використовується властивість grid-gap. Для задання розмірів рядків, які утворюються автоматично слід задати властивість grid-auto-rows.
Тепер для кожного блоку окремо вкажемо стилі для задання розміру стовпця та рядка за допомогою властивостей grid-column, grid-row.
.b1 {
grid-column: 1 / 3;
grid-row: 2;
}
.b2 {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.b3 {
grid-row: 3 / 5;
grid-column: 1;
}
.b4 {
grid-column: 3;
grid-row: 4;
}
.b5 {
grid-column: 2;
grid-row: 4;
}
.b6 {
grid-column: 3;
grid-row: 3;
}
Результат можна побачити на рис. 1.
Рис. 1. Макет побудований на основі CSS Grid Layout
Більш детально ознайомитися з технологією можна за джерелом [1].
Література:
