FLEX проти GRID. Практичні приклади CSS FLEX та CSS GRID модулів. Різниця ФЛЕКС та ГРІД на практиці. Що краще FLEX або GRID?

В цьому уроці розкажу про різницю та загальні риси flex (flexbox) та grid модулів, та на практиці покажу варіанти реалізації флекс та грід модулями популярних конструкцій, таких як: притискання футера до низу сторінки, вивід елементів з довільним розміром, вивід тексту з псевдоелементом, вивід непостійних елементів різних розмірів, вивід однакових елементів контенту, вивід елементів у шаховому порядку, вивід елементів згідно патерну, вивід елементів у стилі “Masonry”.

Урок наповнений хорошими практиками застосування ФЛЕКС та ГРІД модулів, лайвгаками та вирішенням різних виникаючих проблем.

❤️ Мій курс з якісної побудови веб-інтерфейсів (HTML, CSS, JS):
https://edu.fls.guru
❤️ Підтримати канал на Patreon та отримати доступ до корисного контенту: https://www.patreon.com/c/freelancerlifestyle
❤️ Стати спонсором каналу: https://www.youtube.com/channel/UCedskVwIKiZJsO8XdJdLKnA/join

🤟 БЕЗКОШТОВНИЙ курс з React (JSX):

🤟 БЕЗКОШТОВНИЙ курс по верстці сайтів (HTML, CSS, JavaScript): https://www.youtube.com/playlist?list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr

✅ Матеріали уроку: https://drive.google.com/file/d/1OGu-hsZyvx3zUvhG3fyPAfgwSKFVZg6E/view?usp=sharing

🔴 Карта каналу: https://miro.com/app/board/o9J_lZB3YKI=/
🔴 Отримати доступ до екстра контенту + підтримати канал: https://www.patreon.com/freelancerlifestyle
🔴 Платний курс по верстці: https://edu.fls.guru
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстці: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook: https://www.facebook.com/freelancerlifestyle
🔴 Instagram: https://www.instagram.com/freelancer.lifestyle

👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв’ю з цікавими IT-спеціалістами – https://www.youtube.com/channel/UCJNVBfLijFSa_tBcrNZKZag
👉 Code Only – канал з практичними уроками – https://www.youtube.com/@codeonly

00:00 – В уроці
00:00:21 – Відмінності та спільні риси FLEX та GRID модулів
00:01:46 – Притискання футера до низу сторінки
00:03:46 – Конструкція виводу елементів з довільним розміром
00:07:14 – Конструкція виводу тексту з псевдоелементом
00:12:06 – Конструкції виводу непостійних елементів різних розмірів
00:17:44 – Конструкція виводу однакових елементів контенту
00:30:52 – Конструкція виводу елементів у шаховому порядку
00:35:07 – Конструкція виводу елементів згідно патерну
00:40:01 – Конструкція виводу елементів у стилі “Masonry”
00:45:08 – Висновки

👋 Мене звати Женя Андріканич, я IT – спеціаліст. Більше 10ти років займаюсь розробкою сайтів.
Перейняти досвід: https://www.youtube.com/c/freelancerlifestyle

#навчання #верстка #фрілансерпожиттю

🤟 Живи, а працюй у вільний час! ©