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

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): https://www.youtube.com/watch?v=tMUi0wdoVgk&list=PLM6XATa8CAG5ox7yneHXtcLraTEIdbZyx 🤟 БЕЗКОШТОВНИЙ курс по верстці сайтів (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:21 - Відмінності та спільні риси FLEX та GRID модулів 01:46 - Притискання футера до низу сторінки 03:46 - Конструкція виводу елементів з довільним розміром 07:14 - Конструкція виводу тексту з псевдоелементом 12:06 - Конструкції виводу непостійних елементів різних розмірів 17:44 - Конструкція виводу однакових елементів контенту 30:52 - Конструкція виводу елементів у шаховому порядку 35:07 - Конструкція виводу елементів згідно патерну 40:01 - Конструкція виводу елементів у стилі "Masonry" 45:08 - Висновки 👋 Мене звати Женя Андріканич, я IT - спеціаліст. Більше 10ти років займаюсь розробкою сайтів. Перейняти досвід: https://www.youtube.com/c/freelancerlifestyle #навчання #верстка #фрілансерпожиттю 🤟 Живи, а працюй у вільний час! ©