Вивчіть CSS Grid за 5 хвилин - Підручник для початківців

Макети сітки мають фундаментальне значення для дизайну веб-сайтів, а модуль CSS Grid - це найпотужніший і найпростіший інструмент для його створення. Я особисто вважаю, що це набагато краще, ніж, наприклад, Bootstrap (прочитайте чому тут).

Модуль також отримав рідну підтримку з боку основних браузерів (Safari, Chrome, Firefox, Edge), тому я вважаю, що всім розробникам, що працюють на фронтах, доведеться освоїти цю технологію в недалекому майбутньому.

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

Я також створив безкоштовний курс CSS Grid. Клацніть тут, щоб отримати повний доступ до

це.

Крім того, перегляньте цю статтю, яка пояснює, про що ви дізнаєтесь протягом курсу:

Тепер давайте стрибнемо в це!

Ваш перший макет сітки

Двома основними інгредієнтами сітки CSS є обгортка (батьківська) та

предмети (діти). Обгортка - це фактична сітка, а елементи - вміст усередині сітки.

Ось розмітка для обгортки з шістьма елементами в ній:

 1 2 3 4 5 6 

Щоб перетворити нашу обгортку divв сітку , ми просто надаємо їй відображення

grid:

Але це поки нічого не робить, оскільки ми не визначили, як ми хочемо, щоб виглядала наша сітка. Він просто буде складати 6 div'sодин на одного.

Я додав трохи стилю, але це не має нічого спільного з сіткою CSS.

Стовпці та рядки

Щоб зробити його двовимірним, нам потрібно буде визначити стовпці та рядки. Давайте створимо три стовпці та два рядки. Ми будемо використовувати властивості grid-template-rowта grid-template-column.

Оскільки ми написали три значення для grid-template-columns, ми отримаємо три стовпці. Ми отримаємо два рядки, оскільки ми вказали два значення для grid-template-rows.

Ці значення визначають, якою шириною ми хочемо, щоб були наші стовпці (100 пікселів), і якою висотою ми хотіли б, щоб були наші рядки (50 пікселів). Ось результат:

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

.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 50px 50px; } 

Спробуйте зрозуміти зв’язок між кодом і версткою.

Ось як це відбувається:

Розміщення предметів

Наступне, що вам потрібно буде дізнатись, - це як розміщувати елементи в сітці. Тут ви отримуєте надпотужність, оскільки це робить просто простим створення макетів.

Давайте створимо сітку 3x3, використовуючи ту ж розмітку, що і раніше.

.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } 

У результаті вийде такий макет:

Зверніть увагу, що ми бачимо на сторінці лише сітку 3x2, тоді як ми визначили її як сітку 3x3. Це тому, що у нас є лише шість елементів, якими можна заповнити сітку. Якби у нас було ще три, тоді б також заповнився нижній рядок.

Щоб розташувати та змінити розмір елементів, ми націлимо їх і використаємо властивості grid-columnand grid-row:

.item1 { grid-column-start: 1; grid-column-end: 4; } 

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

Ось як це буде відтворюватися на екрані:

Вас бентежить, чому у нас є 4 рядки стовпців, коли у нас лише 3 стовпці? Погляньте на це зображення, де я намалював лінії стовпців чорним кольором:

Зверніть увагу, що зараз ми використовуємо всі рядки в сітці. Коли ми змусили перший предмет зайняти весь перший рядок, він відсунув решту предметів вниз.

Нарешті, я хотів би показати простіший спосіб написання синтаксису вище:

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

.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } 

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

І це було все!

Дякуємо за читання! Мене звуть Пер Борген, я співзасновник Scrimba - найпростішого способу навчитися кодувати. Якщо ви хочете навчитися будувати сучасний веб-сайт на професійному рівні, вам слід ознайомитися з нашим адаптивним веб-дизайном веб-дизайну.