Где использовать флексы, а где гриды? 🤨 Спойлер: да где хотите

00:00 Интро
00:11 Флексы и гриды
01:52 Ошибочная картина
02:30 Постановка задачи
02:52 Вёрстка кнопок
04:50 Вставка иконок
05:52 Подгонка иконок
07:32 Выравнивание иконок
08:18 Добавление гридов
09:43 Отступ от иконки
11:25 Гэпы во флексах
12:27 Кроссбраузерность
13:41 Беда с кнопками
14:40 Обман
15:34 Вывод
16:25 Аутро
Нравится? Становитесь патронами / pepelsbey
Код github.com/pepelsbey/playgrou...
Демо pepelsbey.github.io/playgroun...
Фикс для кнопок в Safari 14.0.1 / 1328662342515765249
Browser Default Styles browserdefaultstyles.com/
The Two Values Of Display www.smashingmagazine.com/2019...
Safari Technology Preview developer.apple.com/safari/te...
* * *
Камера: Blackmagic Pocket Cinema 4K
Объектив: Panasonic 12-35 мм, f/2,8
Микрофон: Audio-Technica BP40
Свет: Aputure Light Storm 120d II + Light Dome
Софт: DaVinci Resolve, iZotope RX

[@pepelsbey]

00:00 Интро 00:11 Флексы и гриды 01:52 Ошибочная картина 02:30 Постановка задачи 02:52 Вёрстка кнопок 04:50 Вставка иконок 05:52 Подгонка иконок 07:32 Выравнивание иконок 08:18 Добавление гридов 09:43 Отступ от иконки 11:25 Гэпы во флексах 12:27 Кроссбраузерность 13:41 Беда с кнопками 14:40 Обман 15:34 Вывод 16:25 Аутро

[@almazmusic]

Вёрстка, гриды, флексы - я лично сюда хожу на футболки посмотреть. Вадим ещё ни разу не подводил с этим делом.

[@pepelsbey]

Футболки кончаются, пошли повторы (

[@pronin-cc]

@@pepelsbey Надо будет задонатить на футболку, а то Вадиму не в чем появляться на видео :)

[@user-fe9yv8wm9w]

😂😂😂

[@lenaryan]

Пролетающая фея - это просто топ 😂

[@bbeggar]

Тоже вскрикнул❤️

[@AlexanderSoar]

Вау. Актуальный контент. Поражаюсь тому как люди делятся своим опытом. И как мы раньше жили без ютуба =)

[@1want2be3]

Вадим, какой же ты крутой, твой профессионализм служит для меня стандартом того, чему надо стремиться, а харизма и способ подачи материала - проводник на этом пути. Надеюсь, твой энтузиазм желание делиться своим опытом никогда не иссякнет, да хранит тебя Карло Акутис!

[@ilyapro2815]

Отдельное спасибо за currentColor! не перестаю удивляться CSS

[@TechResearchRu]

В сафари вечно всё не так, как раньше в ИЕ было, я один раз сделал градиант до tranparent и не заработало пришлось через альфаканал прозрачность делать, фф вроде всегда всё корректно понимал, а остальные браузеры на хром перешли, как вспомню времена когда под ие6 надо было готовить сайты вообще страшно. Но ваши видео очень интересны, я больше бэкендер, но приходится для личных проектов и веб-морды придумывать, минималистичные, без всяких бутстрапов и ваши видео реально заставляют переосмыслить подход, спасибо.

[@klev1983]

На самом деле это практически самая распространённая задача в вёрстке. В интернете куча примеров косых. Но наконец-то есть человек, который объясняет просто, как надо делать правильно. Вообще очень жаль, что нет кнопку, которая удаляет всю ту чушь, которая говорит о том, как делать неправильно. И это касается абсолютно всего.

[@dmitriymedvedev70]

Вадим, спасибо Вам за этот обзор! Все отлично объяснено!⚡

[@melondez07]

Боже, какой офигенный канал. Спасибо тебе, ты так приятно преподносишь контент, такое объяснение, атмосфера видео. Супер!

[@kamimeow]

У меня тоже постоянно в голове мысль, а правильно ли я делаю что-то на CSS, хотя верстаю уже 10 лет. Надо быть очень увлеченным чтобы на всё ответы знать (искать), у тебя это получается отлично. Так держать, у тебя есть чему поучиться!

[@karpoc]

Я вроде бы завязал верстать, уже год работаю на стройке посмотрел это видео и понял, надо что сверстать

[@pepelsbey]

Возвращайтесь, у нас тут тоже интересно

[@getmanele]

Спасибо за объяснение где, что нужно использовать. Видео как и всегда на высоте: Быстро, четко, по теме, с юмором! Приятно смотреть - трудно оторваться. Пошел искать ссылку под видео как стать патроном, хочу первым смотреть такие видосики =))). Такие проекты нужно поддерживать 😍

[@pepelsbey]

Спасибо 🥰

[@user-gs5sf8ou9r]

Очень здорово, спасибо!)

[@AleksKob]

спасибо, Вадим, очень интересно ! Задумался сразу, а ведь я тоже использую гриды только когда не нахожу других вариантов. После этого рассказа, возможно мне будет легче использовать гриды по умолчанию, без задания размеров сетки :) Однако задумался, а как бы я задавал отступ для иконки этой кнопки, не посмотрев видео, и не думая о свойстве gap ... И в том случае я бы чуть задумался и писал такое: .button__icon + .button__text { margin-left: 10px }. :) Однако, согласен полностью, с gap это стало выглядеть изящнее и проще )

[@KlinovAS]

За gap в Flex большое спасибо. Не знал. Grid усердно учил, но ради правильного подвала на странице не использовал в связи с одной неадекватной проблемой, которую не мог решить - блок внутри грида не принимал 100% от рассчитанной ширины, где внутри были флексы. Но! Применения и уникальность Гриду я нашел и он незаменим! Мы пишем блоки в любом порядке, а отображаем по указанной схеме как нам нужно. В одном проекте я заменил таблицу на грид, поскольку таблица при сжатии может только сжиматься, а текст внутри переносится, но если столбцов 5-6, то на маленьком экране выглядит очень некрасиво и тогда нам нужно перерисовать таблицу целиком так, чтоб некоторые значения ставали рядом не по вертикали, а делили горизонталь и тоже самое в шапке таблицы. Как такое сделать в таблице? Никак. Можно только две таблицы делать и одну прятать, а другую показывать. Но получается, что нам наплевать на СЕО и роботов поисковика. Спам. А с Гридом мы можем сделать таблицу широкую или компактную. Пример сдесь chistota.kiev.ua/city-kiev/6-generalnaya_uborka.html (таблица с ценами)

[@daryamehazylu5215]

Большое спасибо Вам за видео, было очень полезно, особенно благодаря примерам с кнопками, теперь буду пользоваться гридами чуть свободнее)

[@user-tr5nr7nz9n]

Нужно текст обернуть в span и ему задать margin-left. И через first-child указать что у первого элемента margin: 0. И когда иконка исчезнет, то margin обнулится :) а у иконки его и так нет:) шах и мат скептики:)

[@pepelsbey]

Действительно, звучит гораздо проще!

[@Andreykch]

Как раз недавно столкнулся с этим и вот вышел видос. Зашёл я такой узнать что и где использовать, а мне говорят используй что хочешь и где хочешь))) Круто! Спасибо за видео! (феечка CSS топ. Должна быть на следующий футболке)

[@mysteriym]

Вадим, благодарю! Как всегда все четко и понятно

[@olgadorosheva4424]

Спасибо, очень удобно и доступно

[@enterkvas]

Огромное Вам, Вадим, спасибо. Я - в восторге! Просто чудесно! Успехов!

[@planchet2013]

Спасибо огромное за отличное объяснение, благодарен, что увидел Ваш канал. Надеюсь когда-нибудь вы продолжите выпускать новые видео!

[@mister_robot01]

Вадим, спасибо за ваш труд! Зачастую, ограничиваюсь гридами только из-за поддержки старых браузеров) Хотелось бы услышать про все нюансы браузера Сафари от вас.

[@852Dizel]

Вадим, спасибо за видео! Также был убеждён что гриды должны быть в только в основе страницы. Переубедили) Буду пробовать использовать их и на других элементах!

[@user-up8pc4ff3r]

Использую в основном гриды для более сложных конструкций (типа галлереи), а также там, где нужна чёткая структура, всё по линиям. Был очень рад, когда узнал, что gap с флексами работает ... до того момента пока не открыл сафари, в итоге пришлось во всём проекте эмулировать gap с помощью двухстороннего margin и отрицательного у контейнера. Колхоз, не красиво, но работает и в сафари в том числе ) Вообще тема очень интересная, лайк от меня )

[@liliatolstyh8998]

Как вовремя я вас нашла.)

[@mayerperson]

Спасибо за видео! Отличная мысль!!! Всегда так делал, за что не раз был осужден коллегами, теперь буду просто отправлять на Ваше видео)

[@pepelsbey]

Надпись на футболке как бы говорит :)

[@Samy4Smart]

супер ! все просто и понятно

[@user-rv4kz3yw5t]

Полезный видос, Вадим! Спасибо! Обертка внутри кнопок спасет мир.

[@VikMoc]

Спасибо, за информацию, было интересно!!

[@alaska90210]

Спасибо, очень полезный контент!

[@tataujan]

Хороший контент, красавчик. Отличная подача.

[@goshana1987]

Сразу влюбился в канал🙏 Спасибо за ваши труды!!!

[@user-uu6vr1rg3s]

Оч крутой контент, спасибо за старания))

[@user-eo4rp8fd8n]

Вадим, здравсвуйте. Очень актуальная тема. Спасибо большое за объяснение)

[@WarriorExiles]

Ваууу, align-items в гридах!!! Здорово!!! … Ниче, что и у флексов он есть и иконки ровняются тоже не плохо, коть в bg, хоть так

[@pepelsbey]

Вы кажется не поймали самую главую идею этого видео: используйте что хотите, где хотите. Разрешаю!

[@TenTonHammerOfFist]

Было полезно и интересно, спасибо!

[@html5-coder157]

Отличная работа, Вадим! Спасибо!) На счёт поддержки display: grid/flex у тега button: тоже столкнулся с такой проблемой, конкретно с поддержкой flex у кнопки в safari, года эдак 3-4 назад. Не знаю, побороли ли они эту проблему в своем браузере, но теперь мне страшно использовать flex напрямую для тега button в принципе. Вместо этого, оборачиваю внутреннее содержимое кнопки в блок и уже ему задаю display: flex/grid. Да это некрасиво, но это работает в safari)

[@TamaraNikolaevna]

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

[@Jay-pp4pk]

Посмотрю после работы, но за название (особенно последние 3 слова) уже лайк)

[@dimaburichin7726]

Как всегда круто! Лайк. Хотелось бы увидеть видео с Сафари что там все плохо или что-то работает(Только канул ie теперь Сафари даже шрифты там работают по-своему уже сталкивался везде нормальной шрифт работал в сафари же он становился жирным.)

[@sunnyday5187]

Спасибо. Очень интересно.

[@aleksandrageev7960]

Мне подача материала понравилась. благодарю

[@demon2321777]

Вадим, как всегда, спасибо за полезный контент! К флексам привык, а гриды всегда привлекают своими возможностями) как только гриды и в сафари будут работать отлично, то думаю большинство на гриды перейдёт) не без Вашего участия)

[@almazmusic]

navi davi!

[@clickabelno]

Лайк и подписка! Ставлю Вас пример в нашей онлайн-школе IT-технологий)

[@papan41k]

Вадим, не перестану говорить Вам спасибо! За Вашу работу, разборы, интерес к своему делу. да и в целом, умеете Вы заинтересовать и заставить подумать. Мало того, теперь еще и о механической клавиатуре постоянно думаю) подскажите, пожалуйста, что можно взять новичку в этом деле? Чтобы Вы посоветовали?

[@pepelsbey]

Вам спасибо, что смотрите :) Начать можно с SK64, она недорогая, сравнительно свежая и есть варианты с разными переключателями и блютусом.

[@papan41k]

@@pepelsbey Спасибо! Думаю, на НГ можно себе подарок сделать )

[@alexeyshaykov]

Вадим, как обычно, на высоте!! так держать

[@andreybalatsan9336]

Спасибо Вам, рад что вас нашел

[@user-nh6wb3op5j]

Спасибо! еще один кирпичик в мой фундамент знаний)

[@dimendroider7550]

Калассссно рассказывает 👍👍👍👍👍

[@remontunasdotru]

Балдеж! Спасибо!

[@user-gg9ec2nm6i]

прям как у нас на работе) гриды и флексы для разных целей. Перепутаешь- атата!

[@pepelsbey]

И какие у вас там правила?

[@user-gg9ec2nm6i]

@@pepelsbey скелет сайта на гридах, внутренние блоки с помощью флексов

[@pepelsbey]

А если гриды в кнопке, то публичная порка? Ну что за религиозные глупости.

[@user-mg7tm8ss5u]

Вадим ты красавчик, жаль что нет новых выпусков.

[@denzelwash33]

Хорошо рассказал)

[@user-ky7hp9hk2k]

Спасибо, открыл глаза на этот стереотип

[@zakharkibanov8929]

Эх, надо проработать гриды. Чет всё на флексах делаю :(

[@dsogs9961]

Жиза...

[@user-bo7mb9cf4d]

Но так не хочется с флексов уходить, тут всё так просто

[@antysm1]

Такая же фигня))

[@alenache1]

у гридов поддержка хуже

[@detro1821]

@@alenache1 уже не)

[@oktoster1173]

Круто, очень круто )

[@zalexstudios]

Спасибо! использую и гриды и флексы, но для разных задач. Есть блок с флексами и есть блок с гридами, гриды в основном для фото...

[@artemkabanov2396]

Большое Спасибо!

[@Nerossoul]

Как всегда на высоте.

[@ig89]

Очень круто

[@oleksandr3863]

Спасибо)

[@alexeykiselenko3313]

Очень полезно! Хорошо обобщил

[@andreiribac6284]

Гриды в кнопках - фантастика и подумать и могу что можно это свойство к ним применять! А еще все чаще убеждаюсь в том, что только за счет оверпрайснутой стоимости техники яблочной компании, большинство людей считают интернет эксплорер плохим браузером!)))

[@pepelsbey]

Нет, цены на технику тут совсем не причём. Просто есть браузеры, которые тормозят. Таким был IE, похоже ведёт себя Safari.

[@user-ve7tx3ud6n]

Спасибо Вадим.

[@evshushkov]

Спасибо большое! Не так давно в вертске и все удивляюсь, как люди не пользуются гридами, ведь это такой на самом деле мощный инструмент.

[@awenn2015]

Привычка, я вот года два на флексах верстаю

[@soulcode9941]

На фразе рельсы в начале, в голове возникла мысль сразу про Ruby on Rails

[@sovrinfo]

Спасибо!

[@romansvidunovich3282]

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

[@mirgorods]

Сафари - это современный IE. Все возможные баги можно найти именно в этом браузере.

[@pepelsbey]

Вы неправы, Safari - это современный Safari. Положение и ситуации браузеров несравнимы.

[@mirgorods]

@@pepelsbey если что, это не буквально. Имеется в виду, что в Сафари настолько много багов, что его можно сранить с IE 10 лет назад. И это не только мое субьективное мнение. Я использую Хром во время работы и во время работы уверен, что FF и Edge будут работать также хорошо, но не Safari. Там всегда есть проблемы. Хоть минимальные, но есть. И это я не говорю еще о мобильном Сафари.

[@egoist2956]

Лайк

[@user-uo7ow5uw8k]

Доброго времени Вадим. Очень отличные ролики, смотрю с большим удовольствием. После просмотра данного видео не могу ответить себе на вопрос, может быть вы раскроете мне глаза. Вопрос следующий - почему после того как мы задали элементам "а" и "button" объявление display: grid или flex, то ссылка ведёт себя предсказуемо, а именно растягивается на всю ширину родителя, в то время как элемент button этого не делает, а пляшет исключительно от своего содержимого. Вот так задачка. Всю голову уже сломал, никак не могу найти ответа. Есть конечно предположения что это связано с их изначальным значением display, но с другой стороны мы же его переопределяем. Буду рад если вернете моё психическое состояние в изначальное положение, а то уже не могу больше ни о чём думать. Заранее спасибо.

[@ramilmamedov481]

Спасибо за видео Вадим! У меня только один вопрос, не загружает ли такой подход CSS парсер внутри браузера? То есть возможно ли для CSS парсера удобнее и быстрее будет рассчитывать и парсит и создавать CSSOM с margin-right вместо grid gap?

[@pepelsbey]

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

[@user-ut4hj7kc1t]

Блин, спасибо за спойлер) Потому что я такой: "Хм... А что, есть какие-то правила? Разве я не могу их использовать как хочу?" А вон тут все в заголовке написано)

[@ruslan4048]

Спасибо.

[@maksym.konovalov]

Как обычно-safari умножает на ноль прогресс в css и это видео тоже

[@user-ju1ek6ve9d]

👍

[@fedyaevakat]

Борюсь с убеждением, что использовать grid не стоит нигде, кроме сетки. В этом же убеждено и большинство моих коллег, которые крутят пальчиком у виска, когда я пытаюсь убедить их в обратном. Спасибо большое за полезное видео! )

[@marhabokasimova7135]

zdorovo

[@Zelar1313]

Читал книгу "CSS in Depth", так вот там был ответ на данный вопрос такой. Grid лучше использовать для разметки больших блоков, flex для элементов внутри этих блоков

[@pepelsbey]

Читал книку «Depth in CSS», там был ответ на данный вопрос: флексы лучше использовать для больших блоков, гриды внутри для элементов. Видите, оба наши мнения имеют один и тот же вес, пока в них не добавить аргументацию. Но даже тогда это будет личным выбором каждого. В этом видео я постарался показать, как гриды могут быть где угодно и нет никаких ограничений, только ваше удобство.

[@AnnabellFlemming]

А как же старый добрый селектор * + * внутри кнопки с margin left ?) А вообще крутая идея видео, теперь дождаться бы Сафари и можно праздновать😎

[@pepelsbey]

Да, сова * + * тоже сработает :) Но с гэпами гораздо лучше. Что интересно, в Safari 14.0.1 (только что вышло обновление) гриды уже заработали.

[@m-fusion]

Для себя решил так. Начал использовать гриды на проекте для вёрстки сетки элементов с плиточным/карточным интерфейсом. В остальном пока только флексы. И у меня нет поддержки старых браузеров :)

[@pepelsbey]

Надеюсь, что я всё же зародил зерно сомнения и когда вам нужно будет сделать сложную раскладку в кнопке, вы вспомните про гриды

[@nurasylmelsuly1863]

Дошел до конпки лайка табом и нажал пробел. И понял что это удобно

[@ig89]

Подписался

[@user-md5mw1tp3e]

Гриды тоже в основном для структурных элементов использовал

[@timurkhudiyev]

В сафари кажется grid-column-gap сработает. Раньше тоже маялся с вопросом а использовать ли где то в кнопках гриды. А потом плюнул и начал использовать везде, где они хорошо выполняли свою роль)

[@pepelsbey]

Там, к сожалению, в принципе display: grid не срабатывает на кнопке. Точнее, не срабатывал - только что приехал апдейт 14.0.1, где это починили. Вот же хитрецы.

[@Krasavin_s]

👍🏻

[@pepelsbey]

🤘

[@asgard1428]

Вадим добрый день.Хочу спросить не по теме.Есть ли у тебя видео про то, как правильно использовать в верстке margin и padding.Не могу найти хорошее виде, где будет объяснено какое и как свойство правильно применять чтобы верстка не ломалась.

[@pepelsbey]

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

[@asgard1428]

Понял.Спасибо.Я не прошу Вас обьяснять, думал что есть ресурс или может видео хорошее, где это подробно рассказано.

[@mirislamus]

Мне бы такую фею, которая за меня верстать будет)

[@user-rl9ou2bh6p]

Люди, о которых речь в первую минуту: вчера были большие, но по пять, а сегодня маленькие, но по три.

[@nikolaymakhonin4690]

Используйте CSS Grid только в крайних случаях: 1) вы не можете обойтись без изменения позиционирования элементов в CSS 2) вы не можете флексами сделать так, чтобы некоторые границы пересекались крестиком Иначе рискуете напороться на проблемы с гридами, и придется переделывать все на flex. CSS Grid не является заменой flex, и не нужно все верстать на гридах.

[@pepelsbey]

Используйте флексы только в крайних случаях: 1. Вы не можете обойтись без изменения позиционирования в CSS 2. Вы не можете гридами сделать так, чтобы некоторые границы пересекались крестиком Иначе вы рискуете напороться на проблемы с флексами и придётся всё переделывать на гридах. Флексы не являются заменой гридам, и не нужно всё верстать на флексах.

[@pepelsbey]

Я подумал, что будет интересно перевернуть вашу фразу. Она звучит так же «аргументированно», но утверждает обратное. Мне кажется, что в вас говорит привычка и подспудные страхи перед новым.

[@wov2004]

Учусь верстать недавно, не успел нахвататься ограничений, "верстаю как хочу". Видимо еще не прошел школу бутстрапа.

[@user-mc4ft1hz8i]

Да в страпе ничего такого, вы сами можете продумать и сотворить свой. Просто заранее определите классы для поведения элементов, я лично использую класс который определяет флекс и флекс колумн. Просто запарился как то печатать постоянно. Мне правда проще я фул стек. Удачи в освоении, начинайте учить бекенд, это поможет в понимании вёрстки, как бы странно это не звучало. Если будут вопросы не стесняйтесь [e-mail] .

[@RomanYakovlevRY]

А есть ли плюсы использования em вместо px ? Шрифт то фиксированной величины. Или это исключительно ваше предпочтение ?

[@pepelsbey]

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

[@vadim8740]

Сейчас гэпы на флексах в сафари работают

[@GGSoft2009]

Пожалуйста подскажите: Как заменить бутстраповский col-lg-4 col-md-6 col-sm-12 на CSS FLEX (GRID)? и почему не использовать Bootstrap вместо CSS FLEX (GRID)?

[@pepelsbey]

Мне кажется вы первым вопросом ответили на второй. Если вы знаете как работают флексы и гриды, вам не нужно конвертировать классы в стили. Вы тогда просто знаете, как это сделать. Учите CSS, а не Bootstrap.

[@danila-korotkov]

А как обстоят дела с точки зрения трудозатрат на работу с гридами? Например: я сделаю огромный лэндинг исключительно на гридах, буду использовать без разбора для отступов и всего чего смогу. Насколько это будет менее эффективно, с точки зрения выполнения, нежели, если использую отступы, флексы и гриды там, "где надо"?

[@pepelsbey]

В том и дело, что «где надо» не существует. Существует ваш личный уровень владения технологиями. Если кто-то не умеете верстать - трудозатраты будут огромные. Если другой человек отлично владеет гридами и флексами - низкие. Знайте всё, пользуйтесь где вам удобно.

[@danila-korotkov]

Я не верно выразил мысль. Про трудозатраты я имел ввиду затраты процессора, памяти и прочего..

[@pepelsbey]

Обычно перфоманс рендеринга раскладки - это третья или пятая вещь, которую нужно сделать типичному сайту. Важнее оптимизировать JS, шрифты, картинки, доставку про сети, а потом, когда уже всё идеально и 100 в Лайтхаусе - можно подумать про скорость раскладки.

[@AntiFreeZ16]

А где взять эту фею в свой проект, чтобы она писала css так же быстро? :D

[@pepelsbey]

Пробовали npm install fairy?

[@user-ep5xt4gg2d]

Можно реализовать все это дело через @supports и никаких оберток не нужно будет делать.

[@0bsess10n]

так как кнопки то делать в наше время, беря во внимание текущий сафари?

[@pepelsbey]

Да как хотите :) По задаче и по поддержке: если в кнопках только текст, то можно и не усложнять. Если есть иконки и нужно удобно, то смотрите на совместимость.