7 способів розміщення елементів з допомогою макета CSS Grid

20

Від автора: у цій статті ми дізнаємося, як можна розмістити елементи на сторінці сім’ю способами за допомогою модуля Grid Layout. Основний акцент ми зробимо на конкретні способи розміщення елементів на сторінці за допомогою CSS Grid. Давайте пройдемося по ним.

Як вирішити погану підтримку Grid Layout

Як я вже писав раніше, у Grid Layout жахлива підтримка. За замовчуванням його не підтримує жодна основний браузер IE підтримує тільки стару версію. Щоб приклади правильно працювали, вам потрібно активувати прапор «Experimental Web Platform features» у Chrome і прапор «layout.css.grid.enabled» в Firefox. Для тих, хто сам не може активувати ці прапори, я підготував скріншоти кінцевих версій кожного методу.

№1 задаємо всі в окремих властивостях

7 способов размещения элементов с помощью макета CSS Grid

За допомогою цієї версії ми розміщували елементи в моїх попередніх статтях. Метод містить багато коду, але дуже простий для розуміння. Ліва/права і верхня/нижня межі елемента задаються через властивості grid-column-start/grid-column-end і grid-row-start/grid-row-end. Якщо елемент буде займати лише один рядок або колонку, властивості з –end можна опустити, що трохи скоротить код CSS.

У демо нижче елемент поміщений на другий рядок у другу колонку за допомогою наступного CSS коду:

.a {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}

Те ж саме можна зробити по-іншому:

.a {
grid-column-start: 2;
grid-row-start: 2;
}

№2 за допомогою grid-row і grid-column

7 способов размещения элементов с помощью макета CSS Grid

CSS-код в першому прикладі читаним і простим, але нам довелося використовувати 4 властивості для розміщення одного елемента. Замість чотирьох можна використовувати лише два: grid-column і grid-row. Обидва властивості приймають два значення, розділених слешем. Перше значення визначає стартову лінію, а друге – кінцеву лінію елемента.

Синтаксис властивостей:

.selector {
grid-row: row-start / row-end;
grid-column: col-start / col-end;
}

Щоб помістити елемент З в правий нижній кут сітки, можна використовувати наступний код:

.c {
grid-row: 2 / 4;
grid-column: 2 / 4;
}

№3 з допомогою grid-area

7 способов размещения элементов с помощью макета CSS Grid

Чисто технічно, позиціонується нами елемент займає певну область на веб-сторінці. Межі елемента визначаються переданими нами значеннями рядків сітки. Всі значення можна вказати одночасно властивості grid-area.

Так буде виглядати CSS властивість:

.selector {
grid-area: row-start / col-start / row-end / col-end;
}

Якщо ви забуваєте правильний порядок значень, просто запам’ятайте, що спершу потрібно вказати позицію лівого верхнього кута (row-start – col-start), а потім правого нижнього кута елемента (row-end – col-end).

Як і в попередньому прикладі, щоб розмістити елемент З в правий нижній кут сітки, потрібно використовувати наступний код:

.c {
grid-area: 2 / 2 / 4 / 4;
}

№4 за допомогою ключового слова span

7 способов размещения элементов с помощью макета CSS Grid

Щоб не ставити кінцеву лінію позиціонуємого елемента, можна використовувати ключове слово span. З його допомогою можна задати число колонок або рядків, на які розтягнеться елемент.

Синтаксис ключового слова span:

.selector {
grid-row: row-start / span row-span-value;
grid-column: col-start / span col-span-value;
}

Якщо елемент займає всього один рядок або стовпець, слово span і його значення можна не вказувати.

В цей раз давайте помістимо елемент у верхній лівий кут сітки. Зробити це можна наступним кодом.

.c {
grid-row: 1 / span 2;
grid-column: 1 / span 2;
}

№5 з допомогою іменованих ліній

7 способов размещения элементов с помощью макета CSS Grid

Досі ми позиціонували елемент з допомогою номерів рядків. Цей спосіб зручний, якщо макет досить простий. Але якщо потрібно розмістити кілька елементів, в коді можна заплутатися. У більшості випадків елемент на сторінці підпадає під якусь категорію. Приміром, хедер може йти від лінії стовпця до c2 c1 і від лінії рядка r1 до r2. Набагато легше дати цим лініям імена і потім позиціонувати елементи з їх допомогою.

Давайте створимо простий макет, щоб зрозуміти концепцію. Спершу потрібно змінити CSS контейнера сітки:

.container {
display: grid;
grid-gap: 10px;
grid-template-columns: [head-col-start] 180px [content-col-start] 180px [content-col-mid] 180px [head-col-end];
grid-template-rows: [head-row-start] auto [head-row-end] auto [content-row-end] auto [footer-row-end];
}

Що я зробив вгорі: я присвоїв всіх лініях імена за типом контенту, який вони зберігають. Ідея полягає в тому, щоб прописати імена, які будуть давати нам уявлення про розміщення елементів. У цьому конкретному прикладі наш хедер розтягнутий на всі колонки. Тому очевидно, що стартову і кінцеву лінію стовпця можна назвати «head-col-start» and «head-col-end», і вони будуть представляти ліву і праву межі хедера. Всі інші лінії можна назвати схожим чином. Після присвоєння імен всіх лініях можна використовувати код CSS нижче для позиціонування всіх елементів.

.header {
grid-column: head-col-start / head-col-end;
grid-row: head-row-start / head-row-end;
}
.sidebar {
grid-column: head-col-start / content-col-start;
grid-row: head-row-end / content-row-end;
}
.content {
grid-column: content-col-start / head-col-end;
grid-row: head-row-end / content-row-end;
}
.footer {
grid-column: head-col-start / head-col-end;
grid-row: content-row-end / footer-row-end;
}

Нам довелося написати CSS коду трохи більше звичайного, але якщо тепер подивитися на код, відразу стає зрозуміло, де розташовані елементи.

№6 за допомогою іменованих ліній, загальних ліній і ключового слова span

7 способов размещения элементов с помощью макета CSS Grid

В попередньому методі всі рядки мали різні імена, що позначають початок, середину і кінець елемента. Приміром, «content-col-start» і «content-col-mid» позначали початок і середину секції вмісту веб-сторінки. Якщо секція контенту розтягнута на більшу кількість рядків, нам довелося б вигадувати додаткові імена ліній типу «content-col-mid-one», «content-col-mid-two» і т. д.

У такій ситуації можна використовувати загальне ім’я «content» для всіх ліній сітки в секції контенту і ключове слово span, за допомогою якого можна вказати кількість цих ліній. Також можна вказати число в імені лінії, щоб задати кількість рядків або стовпчиків, які буде займати елемент.

CSS даного методу:

.selector {
grid-row: row-name row-start-number/ row-name row-end-number;
grid-column: col-name col-start-number / span col-name col-to-span;
}

Як і в попередньому методі, тут теж необхідно змінити CSS контейнера сітки.

.container {
display: grid;
grid-gap: 10px;
grid-template-columns: [one-eighty] 180px [one-eighty] 180px [one-eighty] 180px;
grid-template-rows: [head-row] auto [content-row] auto [content-row] auto [content-row] auto [footer-row] auto;
}

У всіх ліній по рядках задано одне ім’я, яке представляє ширину в пікселях, всі іменовані лінії рядків представляють рядка секцій веб-сторінки. У цьому демо я додав рекламну секцію під сайдбар. CSS код:

.header {
grid-column: one-eighty 1 / one-eighty 4;
grid-row: head-row / content-row 1;
}
.sidebar {
grid-column: one-eighty 1 / one-eighty 2;
grid-row: content-row 1 / content-row 2;
}
.advert {
grid-column: one-eighty 1 / one-eighty 2;
grid-row: content-row 2 / content-row 3;
}
.content {
grid-column: one-eighty 2 / one-eighty 4;
grid-row: content-row 1 / span content-row 2;
}
.footer {
grid-column: one-eighty 1 / span one-eighty 3;
grid-row: content-row 3 / footer-row;
}

№7 за допомогою іменованих областей сітки

7 способов размещения элементов с помощью макета CSS Grid

Щоб не використовувати лини, можна привласнити різним областям на сторінці імена і з їх допомогою розміщувати елементи. І знову нам доведеться внести зміни в CSS код контейнера сітки.

CSS код контейнера повинен бути таким:

.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 180px 180px 180px;
grid-template-areas: «header header header»
«content content advert»
«content content ……»
«footer footer footer»;
}

Одна крапка (.) або послідовність точок створять порожню/порожні клітинки. У всіх рядків повинні бути однакові номери колонок. Ось чому нам довелося додати точки, а не залишати значення порожнім. Зараз іменована область сітки може бути тільки прямокутна. Проте в майбутніх версіях специфікації це може змінитися. Розглянемо CSS всіх елементів.

.header {
grid-area: header;
}
.content {
grid-area: content;
}
.advert {
grid-area: advert;
}
.footer {
grid-area: footer;
}

Після визначення всіх областей їх прив’язка до різним елементам не викликає труднощів. Пам’ятайте, що в іменах областей не можна використовувати спеціальні символи, інакше оголошення буде неправильним.

Висновок

От і все! Ми розглянули 7 методів розміщення елементів за допомогою макета CSS Grid. У вас є які-небудь поради щодо статті? Який з методів ви б використовували в своїх проектах? Пишіть про це в коментарях.