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

[@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 Аутро

[@lenaryan]

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

[@bbeggar]

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

[@ilyapro2815]

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

[@AlexanderSoar]

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

[@almazmusic]

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

[@pepelsbey]

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

[@pronin-cc]

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

[@АндрейБеларусь-ц9ъ]

😂😂😂

[@1want2be3]

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

[@karpoc]

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

[@pepelsbey]

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

[@klev1983]

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

[@KlinovAS]

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

[@melondez07]

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

[@dmitriymedvedev70]

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

[@kamimeow]

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

[@planchet2013]

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

[@AleksKob]

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

[@ИванМикерин-ю9д]

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

[@WarriorExiles]

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

[@pepelsbey]

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

[@Юрий-р7ф]

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

[@pepelsbey]

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

[@TamaraNikolaevna]

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

[@Samy4Smart]

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

[@ИванИвпнов-п6ь]

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

[@pepelsbey]

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

[@ИванИвпнов-п6ь]

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

[@pepelsbey]

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

[@daryamehazylu5215]

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

[@Жизнь-я3ъ]

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

[@Andreykch]

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

[@mister_robot01]

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

[@852Dizel]

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

[@andreiribac6284]

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

[@pepelsbey]

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

[@ИванИлющенко-ш6с]

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

[@aleksandrageev7960]

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

[@mirgorods]

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

[@pepelsbey]

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

[@mirgorods]

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

[@Владимир-д9и7о]

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

[@mysteriym]

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

[@mayerperson]

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

[@pepelsbey]

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

[@html5-coder157]

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

[@АндрейФилиппов-з3и]

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

[@enterkvas]

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

[@getmanele]

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

[@pepelsbey]

Спасибо 🥰

[@artemkabanov2396]

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

[@soulcode9941]

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

[@zalexstudios]

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

[@liliatolstyh8998]

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

[@alaska90210]

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

[@evshushkov]

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

[@awenn2015]

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

[@ВладимирЧернов-ш8б]

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

[@goshana1987]

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

[@romansvidunovich3282]

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

[@ruslan4048]

Спасибо.

[@ДенисМалышок]

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

[@dimaburichin7726]

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

[@zakharkibanov8929]

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

[@dsogs9961]

Жиза...

[@user-bo7mb9cf4d]

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

[@antysm1]

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

[@alenache1]

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

[@detro1821]

@@alenache1 уже не)

[@tataujan]

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

[@VikMoc]

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

[@dimendroider7550]

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

[@ИгорьГлазков-с1б]

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

[@demon2321777]

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

[@almazmusic]

navi davi!

[@m-fusion]

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

[@pepelsbey]

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

[@ig89]

Очень круто

[@Zelar1313]

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

[@pepelsbey]

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

[@fedyaevakat]

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

[@Jay-pp4pk]

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

[@clickabelno]

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

[@denzelwash33]

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

[@sunnyday5187]

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

[@alexeyshaykov]

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

[@papan41k]

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

[@pepelsbey]

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

[@papan41k]

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

[@ИльяКорнеев-з5й]

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

[@andreybalatsan9336]

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

[@alexeykiselenko3313]

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

[@timurkhudiyev]

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

[@pepelsbey]

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

[@remontunasdotru]

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

[@АндрейМилин-о4ъ]

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

[@oleksandr3863]

Спасибо)

[@oktoster1173]

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

[@ОлегСелин-ш9ы]

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

[@IvanNuriev]

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

[@nikolaymakhonin4690]

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

[@pepelsbey]

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

[@pepelsbey]

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

[@ДмитрийАлексеев-я6ц]

👍

[@nurasylmelsuly1863]

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

[@maksym.konovalov]

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

[@marhabokasimova7135]

zdorovo

[@asgard1428]

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

[@pepelsbey]

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

[@asgard1428]

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

[@wov2004]

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

[@ГлебШарапов-л1ы]

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

[@Nerossoul]

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

[@AnnabellFlemming]

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

[@pepelsbey]

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

[@ramilmamedov481]

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

[@pepelsbey]

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

[@ig89]

Подписался

[@GGSoft2009]

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

[@pepelsbey]

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

[@MaksymMotoman]

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

[@mirislamus]

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

[@Bo10789]

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

[@RomanYakovlevRY]

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

[@pepelsbey]

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

[@eduardomavlyutov4710]

Возможно, вопрос немного не в тему, но всё же, подскажите, пожалуйста: Допустим, есть макет, на котором заголовок сайта находится под hero-image, на этом hero-image есть еще какие-то ярлыки с информацией. Обычно нас это не пугает - мы размещаем в разметке заголовок, а также остальной контент, как полагается, затем регулируем порядок через свойство order в CSS. Вопрос: влияет ли на SEO вся эта котовасия с разницей в порядке элементов (визуальная часть/разметка)? SEO - это, конечно, та еще магия, но может кто-то все-таки в курсе? Есть у некоторых коллег мнение, что разметка должна обязательно совпадать с визуальной частью, иначе SEO пострадает, но лично мне это кажется бредом.

[@pepelsbey]

Визуальное расположение не интересует поисковых роботов, насколько мне известно. Сделайте удобный, быстрый и доступный сайт, который понравится пользователям и поисковики это заметят и полюбят вас.

[@eduardomavlyutov4710]

@@pepelsbey спасибо за ответ!) Постараюсь убедить в этом коллег)

[@максим-м9ж5э]

лайк за спойлер

[@pepelsbey]

Сэкономил вам 17 минут

[@benhummer185]

Красота - это здорово! А кто-нибудь сравнивал скорость всего этого "хозяйства"?

[@pepelsbey]

Почувствовать, что гриды медленнее, скажем, флексов у вас получится, если всё остальное идеально оптимизируете и вам станет скучновато. Так что не переживайте :)

[@mumusus]

Если одна иконка осталась можно ей задать марджин-райт:0 если она only-of-type, например

[@pepelsbey]

…или просто использовать gap, чтобы код читался легче )

[@zencod_ru]

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

[@pepelsbey]

Беда в каком смысле? Есть коллекция проблем с гридами github.com/rachelandrew/gridbugs

[@zencod_ru]

@@pepelsbey ну то что gap в сафари не работает и у меня ещё какие-то проблемы с кнопками были под мобильным сафари, сейчас уже точно не вспомню. Спасибо за видео и за ссылку, поизучаю =)

[@volodymyrstepaniuk3094]

отличный пример.лайк и подписка.подскажите тему VS CODE

[@pepelsbey]

GitHub Light

[@volodymyrstepaniuk3094]

@@pepelsbey благодарю

[@TheDrugD]

@@pepelsbey а ещё как будто анимация у курсора какая-то кастомная, плавно перемещается. Или мне показалось?

[@pepelsbey]

Вот не уверен, может быть - я в ней уже давно, не замечаю )

[@TheDrugD]

Нашёл! В настройках надо включить cursor smooth caret animation :)

[@6602-w2k]

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

[@bachata-salsa-lessons]

т.е. для совместимости лучше не использовать совсем новые функции

[@SingleFeniks]

Не травите душу, мне надо совместимость с IE11 поддерживать на проекте. =(

[@pepelsbey]

Держитесь, будет проще: Microsoft изо всех сил старается его увести с рынка

[@daniyarzhanakhmetov7741]

Все правильно! В CSS семантики нет!