Від автора: при створенні складних сайтів сітки мають величезне значення. Їх значимість у сучасному веб-дизайні стає ясною, варто лише поглянути на кількість фреймворків, які впроваджено дана технологія для прискорення розробки.
Після знайомства зі специфікацією CSS Grid Layout вам більше не знадобляться окремі файли стилів, якщо ви захочете працювати з системою сіток. Не менш важливим плюсом буде те, що ви більше не будете покладатися на властивості типу inline і float для позиціонування елементів на сторінці. У цьому уроці ми вивчимо основні моменти мережевих систем, а також створимо простий макет блогу.
Підтримка в браузерах
На даний момент тільки IE 10+ і Edge підтримують специфікацію Grid Layout – на комерційних сайтах дану технологію використовувати поки що не можна.
У Chrome цю опцію можна активувати через прапор «Experimental Web Platform features» chrome://flags. У Firefox прапор layout.css.grid.enabled.
Інший варіант – використовувати полифил, і так, полифил CSS Grid Polyfill існує! Ви можете скористатися будь-яким з трьох описаних варіантів і вивчати Grid Layout поки він ще на ранньому етапі розробки.
Зверніть увагу: В IE на даний момент працює стара версія специфікації, що означає, що браузер не повністю підтримує нову специфікацію. Коли ми дійдемо до прикладів, я рекомендую вам використовувати Chrome або Firefox.
Термінологія Grid System
Що стосується позиціювання елементів, CSS Grid системи – це ті ж таблиці. Однак цей інструмент набагато потужнішим і різноманітнішим. В даному розділі я розповім про кілька термінів, які необхідно пам’ятати при роботі з сітками:
Одиниці виміру fr: з їх допомогою визначається розмір вільного простору. Використовується разом з grid-rows і grid-columns. З специфікації: «Розподіл простору відбувається тільки після того, як усі «довжини» або розміри рядків і стовпців з контентом досягнуть максимальних розмірів»
Лінії: Лінії відзначають кордону інших елементів. Вони бувають як горизонтальні, так і вертикальні. На малюнку нижче 4 вертикальні і 4 горизонтальні лінії.
Треки: Треки – простір між паралельними лініями. На малюнку нижче 3 вертикальних і 3 горизонтальних треку.
Комірки: Клітинки – будівельні блоки сітки. На малюнку нижче всього 9 клітинок.
Області: Область – прямокутник з довільної кількості клітинок. Тобто трек – це одночасно і область і комірка.
Позиціонування елементів в сітці
Почнемо з засад. У цьому розділі я покажу вам, як за допомогою сітки розміщувати елементи в певних місцях. Для роботи з CSS Grid Layout необхідно створити батьківський елемент і один або більше дочірніх. Для прикладу я візьму розмітку нижче:
Для створення сітки контейнера необхідно вказати властивості display:grid або display:inline-grid, а також інші стилі:
.grid-container {
display: grid;
grid-template-columns: 200px 10px 0.3 fr 10px 0.7 fr;
grid-template-rows: auto 20px auto;
}
За допомогою властивостей grid-template-columns та grid-template-rows задається ширина рядків і колонок. У прикладі вище я створив 5 колонок. Колонка шириною 10px використовується як роздільник між елементами. Перша колонка має ширину 200px. Третя колонка займає 0.3 частини від решти простору. А п’ята колонка займає 0.7 від решти простору.
Так як першому рядку задано властивість grid-template-rows: auto, це дозволяє рядку розширюватися при додаванні контенту. Рядок 20px працює як роздільник. У демо нижче видно, що елементи щільно притиснуті один до одного.
Зверніть увагу на елемент – він розташований в другій колонці, яку ми використовуємо як роздільник. Якщо позиціонування елементів не задано вручну, браузер розмістить елементи в клітинках зліва направо, і якщо вони не вмістилися в один ряд, то решта перестрибнуть на другу стоку. Ось чому ми залишили 4 запасних колонки на другому рядку.
Щоб перемістити в задану клітинку сітки, необхідно задати позиціонування даного елемента через CSS. Перш ніж я поясню, як рухати елементи сітки, погляньте на малюнок нижче.
У цьому прикладі ми будемо використовувати лінійну систему розміщення елементів. Лінійна система означає, що лінії сітки будуть грати чільну роль при розміщенні елементів. В якості прикладу візьмемо елемент Ст. Горизонтально даний блок починається на третій лінії і закінчується на 4 лінії колонок. Крім вертикальний ліній даний елемент розташований між ліній на першому і другому ряду.
Для того, щоб встановити стартову вертикальну лінію елемента ми скористаємося властивістю grid-column-start. В нашому випадку значення буде 3. Властивість grid-column-end вказує на кінцеву вертикальну лінію елемента. У нашому випадку це 4. Значення для горизонтальних ліній виставляються таким же чином.
На основі вищесказаного робимо висновок, що для переміщення елемента в другу комірку необхідно використовувати код:
.element-b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
Точно так само для переміщення елемента F у шосту комірку необхідно:
.element-f {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
}
Створюємо макет базовий
Зараз ми створимо базовий макет блогу, в якому будуть хедер, футер, сайдбар і два секції під контент. Спершу розмітка:
Пам’ятайте, що порядок розміщення тегів в розмітці ніяк не впливає на позиціонування елементів на веб-сторінці. Не змінюючи CSS, ви можете поставити футер у розмітці вище хедера, але позиціонування елементів все одно залишиться колишнім. Але я не раджу так робити. Основна думка тут в тому, що розмітка більше не говорить вам, де буде розташований елемент.
Нам залишилося визначити значення властивостей типу grid-row-end, для всіх елементів. Як і в попередньому прикладі, ми скористаємося сіткової діаграми, щоб визначити значення властивостей.
З малюнка вище видно, що хедер розташований між ліній колонок 1 і 4 і ліній рядків 1 і 2. CSS код хедера буде наступним:
.header {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
За тим же принципом «extra content» знаходиться між ліній колонок 3 і 4 і ліній рядків 5 і 6. І CSS:
.extra {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
}
Тепер ви з легкістю можете обчислити залишилися властивості. Погляньте на CodePen демо – щоб краще зрозуміти принцип лінійної системи позиціонування, можете погратися зі значеннями властивостей:
Висновок
З допомогою специфікації CSS grid layout можна з легкістю створювати складні макети. CSS-код цього способу відрізняється простотою і зручністю. При створенні складних макетів дизайну більше не потрібно використовувати властивість float або інші подібні властивості. Також перевага в повному розділенні розмітки і макета. CSS Grid Layout надає безмежні можливості.
