Когда использовать грид, а когда флекс боксы на вебфлоу? Сравниваем flex и grid на примерах

Описание

#webflow #вебфлоу
Многие новички путаются при выборе способа оформления контента на сайте, когда лучше использовать грид, а когда лучше ограничится флекс боксами.

Эти способы разделения контента удобны каждый в своей ситуации, а как анализировать и решать, что лучше использовать конкретно в вашем случае, я расскажу в сегодняшнем ролике.

Если в кратце говорить, то флекс лучше когда контент может меняться по ширине, и что бы правая или левая часть не схлопывалась в две строчки лучше использовать грид. Так же если нам нужно центрировать какой-то блок или элемент внутри блока и относительно остальных элементов внутри этого же блока, тоже нужны нам флекс боксы.

А вот если мы оформляем симметричный контент, который разделен на ровные (или четкие в плане границ) блоки и не должен выходить за их пределы, тогда грид будет более простое и быстрое решение. Все это показано на видео с примерами, так что смотрите для наглядного рассказа.

•••••••••••••••••••••••••••••••
— Полезные штуки для webflow https://freelance-blog.com/webflow/
— Индивидуальное обучение https://freelance-blog.com/study/
— Блог про фриланс и вебфлоу https://freelance-blog.webflow.io
•••••••••••••••••••••••••••••••

❓❓❓ Что такое этот вебфлоу? Почему это НЕ конструктор? Как на нем зарабатывать больше денег, чем остальные? https://youtu.be/2m8fj99q6Ic

БЕСПЛАТНЫЕ курсы по webflow:
? • Базовый расширенный (для новичка) https://youtube.com/playlist?list=PLb25rCxggZ7LaoN1ktwBtEm-OcYCk7yzf
? • Базовый ускоренный, для новичка который спешит https://www.youtube.com/watch?v=ie2a89fvQYY&list=PLb25rCxggZ7Kyfucr52RxXANIxiR0nMsT
? • Портфолио для фрилансера (уровень средний) https://www.youtube.com/playlist?list=PLb25rCxggZ7J8-icz4Wh6Ys1yDSaXalLD
? • Портфолио для студии (уровень сложный) https://www.youtube.com/watch?v=pxRMxE0DG8A&list=PLb25rCxggZ7JL9CpfaJ6tQrOiM6QHfFIV
? • Делаем сложный сайт (уровень профи) https://youtube.com/playlist?list=PLb25rCxggZ7KZQUNa0al9GCtuBzCCjAr9

•••••••••••••••••••••••••••••••
Если вы хотите, зарабатывать те деньги, которые ждут вас через 5 лет самостоятельного роста, буквально телепортироваться в будущее и начать делать профессиональные сайты уже сейчас — тогда я способен вам помочь! https://freelance-blog.com/study/
Нет никакого потока, групп, кураторов. Только вы и я. Прокачиваю именно вас.
•••••••••••••••••••••••••••••••

Моя почта — artstrangers@gmail.com
Телеграм https://t.me/artstranger

•••••••••••••••••••••••••••••••
? • Портфолио — https://freelance-blog.com/
? • Инстаграм — https://www.instagram.com/freelance_proka4ka/
? • Бесплатные плюшки — https://freelance-blog.com/webflow/
? • Материалы для уроков — https://freelance-blog.webflow.io/
? • Индивидуальное обучение — https://freelance-blog.com/study/
•••••••••••••••••••••••••••••••

Таймкоды:
00:00 Что будем делать
02:16 Строим хедер с помощью флексов
10:21 Реализовываем блок с преимуществами с помощью грид и сравниваем с флекс
21:19 Итоги