Міністерство освіти і науки України

Тернопільський національний технічний університете імені Івана Пулюя

Кафедра комп’ютерних систем та мереж

Звіт
про виконання лабораторної роботи №6
На тему: “ Верстка з використанням Grid.”

Виконав студент групи СП-31

Гавриленко А.В.
Перевірив:
Крамар Т. О.

Тернопіль – 2024
 Тема: Верстка з використанням Grid.
Мета: Ознайомлення принципами верстки з використанням grid-
елементів.

ХІД РОБОТИ

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

приступити до розробки сайту з використанням grid-елементів. Це можна
зробити 2 способами: перший спосіб полягає в тому що потрібно
використати стовбці сітки і відцентровувати елементи та ставити їх там де
захочемо, проте тоді такий макет не буде працювати як адаптивна верстка
сайту; 2 спосіб полягає в тому що ми будемо використовувати атрибут span,
він схожий до flex. Зза допомогою цього способу ми зможемо розробити
адаптивну верстку для сайту, тому ми будемо використовувати 2 спосіб, а не
1.
Для початку створимо нову HTML сторінку, підключимо СSS файл та
напишемо базовий код.
Для того щоб використати grid-елементи нам потрібно використати тег
display з атрибутом grid. Атрибут grid є одним із значень властивості CSS
display, він створює контейнер зі сіткою для розміщення елементів у веб-
документі. Лістинг використання атрибуту grid (див. лістинг 6.1).
Ця властивість дозволяє розташувати елементи у 2D-сітці, де вони
можуть бути розташовані в будь-якому рядку чи стовпці. Сітка розбивається
на рядки та стовпці за допомогою властивостей grid-template-rows, grid-
template-columns та grid-template-areas.
Кожен елемент, який має бути розміщений у цій сітці, визначається за
допомогою властивостей grid-row-start, grid-row-end, grid-column-start та grid-
column-end.
 Є також багато інших властивостей, які можуть бути використані для
налаштування розміщення елементів в сітці, таких як grid-template-rows, grid-
template-columns, grid-template-areas, grid-gap тощо.
Загалом, display grid є інструментом для створення складних та
динамічних макетів, що дає можливість створювати різноманітні варіанти
розміщення елементів відповідно до потреб веб-дизайну.

Лістинг 6.1 – Приклад використовування атрибуту grid

.gridExample {
display: grid;
grid-auto-flow: dense;
grid-auto-rows: 1fr;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

Давайте розберем деякі властивості які знаходяться в прикладі

використання атрибуту grid (див. лістинг 6.1):
- display: grid – ми вже розглядали вище;
- grid-auto-flow: dense – використовується коли ми хочемо щоб
браузер намагався максимально заповнити всі вільні місця в сітці,
розміщуючи елементи більш компактно та ефективно;
- grid-auto-rows: 1fr – це необхідно використовувати тоді, коли ми
хочемо присвоїти одне і те ж розмірне значення всім елементам сітки (grid),
які не були встановлені вручну;
- grid-gap: 5px – використовуємо коли хочем задати відступ між
елементами сітки;
- grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) –
використовує дві функції: repeat() та minmax(), щоб створити гнучкий та
адаптивний макет.
Функція repeat() дозволяє повторювати вказані значення стовпців
декілька разів, тим самим скорочуючи кількість написання коду. У даному
випадку, repeat(auto-fit, minmax(100px, 1fr)) означає, що стовпці будуть
повторюватись автоматично, так що якщо ми додаємо елементи до сітки, то
стовпці автоматично будуть додаватись або видалятись в залежності від
доступного місця у контейнері.
Функція minmax() визначає мінімальний та максимальний розміри
стовпця. У даному випадку, стовпці матимуть мінімальну ширину 100px, а
максимальна ширина стовпця буде автоматично розраховуватись як 1fr. Це
означає, що ширина стовпця буде автоматично пропорційна в залежності від
розміру контейнера.

Рисунок 6.1 – Сайт з використанням grid-елементів

Детальніше за посиланням: https://artem-havrylenko-lab6.netlify.app/.

Протестуємо наш оновлений сайт у валідаторі та виправимо помилки.
На рисунку 6.2 можна переглянути результат тестування.
 Рисунок 6.2 – Результати тестувань у валідаторі
Тепер спробуємо відкрити веб-сторінку в різних браузерах. На
рисунках 6.3 – 4 зображено вигляд сторінки.

Рисунок 6.3 – Firefox

 Рисунок 6.4 – Microsoft Edge

Висновки: У процесі виконання лабораторної роботи було створено

веб-сторінку з використанням grid-елементів. Було ознайомлено з
принципами верстки за допомогою CSS Grid, що дозволило створити складні
та адаптивні макети. Було використано властивості grid, такі як grid-auto-
flow, grid-auto-rows, grid-gap та grid-template-columns для налаштування
макету. Практично реалізовано адаптивний дизайн за допомогою функцій
repeat() та minmax(), що дозволило автоматично підлаштовуватися під
розміри контейнера. Створений сайт було протестовано у валідаторі та
відкрито в різних браузерах для забезпечення кросбраузерної сумісності.
Загалом, виконано ефективне використання CSS Grid у веб-дизайні для
створення гнучких та адаптивних макетів, що можуть бути зручно адаптовані
під різні екрани та пристрої.