Вадим, какой же ты крутой, твой профессионализм служит для меня стандартом того, чему надо стремиться, а харизма и способ подачи материала - проводник на этом пути. Надеюсь, твой энтузиазм желание делиться своим опытом никогда не иссякнет, да хранит тебя Карло Акутис!
За gap в Flex большое спасибо. Не знал. Grid усердно учил, но ради правильного подвала на странице не использовал в связи с одной неадекватной проблемой, которую не мог решить - блок внутри грида не принимал 100% от рассчитанной ширины, где внутри были флексы. Но! Применения и уникальность Гриду я нашел и он незаменим! Мы пишем блоки в любом порядке, а отображаем по указанной схеме как нам нужно. В одном проекте я заменил таблицу на грид, поскольку таблица при сжатии может только сжиматься, а текст внутри переносится, но если столбцов 5-6, то на маленьком экране выглядит очень некрасиво и тогда нам нужно перерисовать таблицу целиком так, чтоб некоторые значения ставали рядом не по вертикали, а делили горизонталь и тоже самое в шапке таблицы. Как такое сделать в таблице? Никак. Можно только две таблицы делать и одну прятать, а другую показывать. Но получается, что нам наплевать на СЕО и роботов поисковика. Спам. А с Гридом мы можем сделать таблицу широкую или компактную. Пример сдесь chistota.kiev.ua/city-kiev/6-generalnaya_uborka.html (таблица с ценами)
На самом деле это практически самая распространённая задача в вёрстке. В интернете куча примеров косых. Но наконец-то есть человек, который объясняет просто, как надо делать правильно. Вообще очень жаль, что нет кнопку, которая удаляет всю ту чушь, которая говорит о том, как делать неправильно. И это касается абсолютно всего.
У меня тоже постоянно в голове мысль, а правильно ли я делаю что-то на CSS, хотя верстаю уже 10 лет. Надо быть очень увлеченным чтобы на всё ответы знать (искать), у тебя это получается отлично. Так держать, у тебя есть чему поучиться!
Использую в основном гриды для более сложных конструкций (типа галлереи), а также там, где нужна чёткая структура, всё по линиям. Был очень рад, когда узнал, что gap с флексами работает ... до того момента пока не открыл сафари, в итоге пришлось во всём проекте эмулировать gap с помощью двухстороннего margin и отрицательного у контейнера. Колхоз, не красиво, но работает и в сафари в том числе ) Вообще тема очень интересная, лайк от меня )
спасибо, Вадим, очень интересно ! Задумался сразу, а ведь я тоже использую гриды только когда не нахожу других вариантов. После этого рассказа, возможно мне будет легче использовать гриды по умолчанию, без задания размеров сетки :) Однако задумался, а как бы я задавал отступ для иконки этой кнопки, не посмотрев видео, и не думая о свойстве gap ... И в том случае я бы чуть задумался и писал такое: .button__icon + .button__text { margin-left: 10px }. :) Однако, согласен полностью, с gap это стало выглядеть изящнее и проще )
Как раз недавно столкнулся с этим и вот вышел видос. Зашёл я такой узнать что и где использовать, а мне говорят используй что хочешь и где хочешь))) Круто! Спасибо за видео! (феечка CSS топ. Должна быть на следующий футболке)
Нужно текст обернуть в span и ему задать margin-left. И через first-child указать что у первого элемента margin: 0. И когда иконка исчезнет, то margin обнулится :) а у иконки его и так нет:) шах и мат скептики:)
Вадим, спасибо за ваш труд! Зачастую, ограничиваюсь гридами только из-за поддержки старых браузеров) Хотелось бы услышать про все нюансы браузера Сафари от вас.
Вадим, спасибо за видео! Также был убеждён что гриды должны быть в только в основе страницы. Переубедили) Буду пробовать использовать их и на других элементах!
Гриды в кнопках - фантастика и подумать и могу что можно это свойство к ним применять! А еще все чаще убеждаюсь в том, что только за счет оверпрайснутой стоимости техники яблочной компании, большинство людей считают интернет эксплорер плохим браузером!)))
Отличная работа, Вадим! Спасибо!) На счёт поддержки display: grid/flex у тега button: тоже столкнулся с такой проблемой, конкретно с поддержкой flex у кнопки в safari, года эдак 3-4 назад. Не знаю, побороли ли они эту проблему в своем браузере, но теперь мне страшно использовать flex напрямую для тега button в принципе. Вместо этого, оборачиваю внутреннее содержимое кнопки в блок и уже ему задаю display: flex/grid. Да это некрасиво, но это работает в safari)
Спасибо за объяснение где, что нужно использовать. Видео как и всегда на высоте: Быстро, четко, по теме, с юмором! Приятно смотреть - трудно оторваться. Пошел искать ссылку под видео как стать патроном, хочу первым смотреть такие видосики =))). Такие проекты нужно поддерживать 😍
Блин, спасибо за спойлер) Потому что я такой: "Хм... А что, есть какие-то правила? Разве я не могу их использовать как хочу?" А вон тут все в заголовке написано)
Как всегда круто! Лайк. Хотелось бы увидеть видео с Сафари что там все плохо или что-то работает(Только канул ie теперь Сафари даже шрифты там работают по-своему уже сталкивался везде нормальной шрифт работал в сафари же он становился жирным.)
@@pepelsbey если что, это не буквально. Имеется в виду, что в Сафари настолько много багов, что его можно сранить с IE 10 лет назад. И это не только мое субьективное мнение. Я использую Хром во время работы и во время работы уверен, что FF и Edge будут работать также хорошо, но не Safari. Там всегда есть проблемы. Хоть минимальные, но есть. И это я не говорю еще о мобильном Сафари.
Борюсь с убеждением, что использовать grid не стоит нигде, кроме сетки. В этом же убеждено и большинство моих коллег, которые крутят пальчиком у виска, когда я пытаюсь убедить их в обратном. Спасибо большое за полезное видео! )
Для себя решил так. Начал использовать гриды на проекте для вёрстки сетки элементов с плиточным/карточным интерфейсом. В остальном пока только флексы. И у меня нет поддержки старых браузеров :)
Читал книгу "CSS in Depth", так вот там был ответ на данный вопрос такой. Grid лучше использовать для разметки больших блоков, flex для элементов внутри этих блоков
Читал книку «Depth in CSS», там был ответ на данный вопрос: флексы лучше использовать для больших блоков, гриды внутри для элементов. Видите, оба наши мнения имеют один и тот же вес, пока в них не добавить аргументацию. Но даже тогда это будет личным выбором каждого. В этом видео я постарался показать, как гриды могут быть где угодно и нет никаких ограничений, только ваше удобство.
Вадим, как всегда, спасибо за полезный контент! К флексам привык, а гриды всегда привлекают своими возможностями) как только гриды и в сафари будут работать отлично, то думаю большинство на гриды перейдёт) не без Вашего участия)
В сафари кажется grid-column-gap сработает. Раньше тоже маялся с вопросом а использовать ли где то в кнопках гриды. А потом плюнул и начал использовать везде, где они хорошо выполняли свою роль)
Там, к сожалению, в принципе display: grid не срабатывает на кнопке. Точнее, не срабатывал - только что приехал апдейт 14.0.1, где это починили. Вот же хитрецы.
Да в страпе ничего такого, вы сами можете продумать и сотворить свой. Просто заранее определите классы для поведения элементов, я лично использую класс который определяет флекс и флекс колумн. Просто запарился как то печатать постоянно. Мне правда проще я фул стек. Удачи в освоении, начинайте учить бекенд, это поможет в понимании вёрстки, как бы странно это не звучало. Если будут вопросы не стесняйтесь gleb.sharapov@yahoo.com .
Вадим, не перестану говорить Вам спасибо! За Вашу работу, разборы, интерес к своему делу. да и в целом, умеете Вы заинтересовать и заставить подумать. Мало того, теперь еще и о механической клавиатуре постоянно думаю) подскажите, пожалуйста, что можно взять новичку в этом деле? Чтобы Вы посоветовали?
Доброго времени Вадим. Очень отличные ролики, смотрю с большим удовольствием. После просмотра данного видео не могу ответить себе на вопрос, может быть вы раскроете мне глаза. Вопрос следующий - почему после того как мы задали элементам "а" и "button" объявление display: grid или flex, то ссылка ведёт себя предсказуемо, а именно растягивается на всю ширину родителя, в то время как элемент button этого не делает, а пляшет исключительно от своего содержимого. Вот так задачка. Всю голову уже сломал, никак не могу найти ответа. Есть конечно предположения что это связано с их изначальным значением display, но с другой стороны мы же его переопределяем. Буду рад если вернете моё психическое состояние в изначальное положение, а то уже не могу больше ни о чём думать. Заранее спасибо.
Используйте CSS Grid только в крайних случаях: 1) вы не можете обойтись без изменения позиционирования элементов в CSS 2) вы не можете флексами сделать так, чтобы некоторые границы пересекались крестиком Иначе рискуете напороться на проблемы с гридами, и придется переделывать все на flex. CSS Grid не является заменой flex, и не нужно все верстать на гридах.
Используйте флексы только в крайних случаях: 1. Вы не можете обойтись без изменения позиционирования в CSS 2. Вы не можете гридами сделать так, чтобы некоторые границы пересекались крестиком Иначе вы рискуете напороться на проблемы с флексами и придётся всё переделывать на гридах. Флексы не являются заменой гридам, и не нужно всё верстать на флексах.
Я подумал, что будет интересно перевернуть вашу фразу. Она звучит так же «аргументированно», но утверждает обратное. Мне кажется, что в вас говорит привычка и подспудные страхи перед новым.
Вадим добрый день.Хочу спросить не по теме.Есть ли у тебя видео про то, как правильно использовать в верстке margin и padding.Не могу найти хорошее виде, где будет объяснено какое и как свойство правильно применять чтобы верстка не ломалась.
Спасибо за видео Вадим! У меня только один вопрос, не загружает ли такой подход CSS парсер внутри браузера? То есть возможно ли для CSS парсера удобнее и быстрее будет рассчитывать и парсит и создавать CSSOM с margin-right вместо grid gap?
Вы слишком много переживаете за парсинг и работу CSS, это далеко не самое узкое место в современном фронтенде. Так что нет, гриды с гэпами не медленнее отступов - по крайней мере, вы не сможете это уверенно определить в реальных условиях.
Вот всё время и останавливает от использования гридов то, что беда с ними что в десктопном сафари, что в мобильном... А заказчики часто смотрят с айфонов результаты вёрстки
@@pepelsbey ну то что gap в сафари не работает и у меня ещё какие-то проблемы с кнопками были под мобильным сафари, сейчас уже точно не вспомню. Спасибо за видео и за ссылку, поизучаю =)
Пожалуйста подскажите: Как заменить бутстраповский col-lg-4 col-md-6 col-sm-12 на CSS FLEX (GRID)? и почему не использовать Bootstrap вместо CSS FLEX (GRID)?
Мне кажется вы первым вопросом ответили на второй. Если вы знаете как работают флексы и гриды, вам не нужно конвертировать классы в стили. Вы тогда просто знаете, как это сделать. Учите CSS, а не Bootstrap.
Вам придётся выбирать: либо отступ слева, либо справа. И тогда вы сможете без проблем убрать либо текст, либо иконку. Свойство gap работает в обе стороны.
Почувствовать, что гриды медленнее, скажем, флексов у вас получится, если всё остальное идеально оптимизируете и вам станет скучновато. Так что не переживайте :)
Возможно, вопрос немного не в тему, но всё же, подскажите, пожалуйста: Допустим, есть макет, на котором заголовок сайта находится под hero-image, на этом hero-image есть еще какие-то ярлыки с информацией. Обычно нас это не пугает - мы размещаем в разметке заголовок, а также остальной контент, как полагается, затем регулируем порядок через свойство order в CSS. Вопрос: влияет ли на SEO вся эта котовасия с разницей в порядке элементов (визуальная часть/разметка)? SEO - это, конечно, та еще магия, но может кто-то все-таки в курсе? Есть у некоторых коллег мнение, что разметка должна обязательно совпадать с визуальной частью, иначе SEO пострадает, но лично мне это кажется бредом.
Визуальное расположение не интересует поисковых роботов, насколько мне известно. Сделайте удобный, быстрый и доступный сайт, который понравится пользователям и поисковики это заметят и полюбят вас.
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 Надо будет задонатить на футболку, а то Вадиму не в чем появляться на видео :)
😂😂😂
Пролетающая фея - это просто топ 😂
Тоже вскрикнул❤️
Отдельное спасибо за currentColor! не перестаю удивляться CSS
Вау. Актуальный контент. Поражаюсь тому как люди делятся своим опытом. И как мы раньше жили без ютуба =)
Вадим, какой же ты крутой, твой профессионализм служит для меня стандартом того, чему надо стремиться, а харизма и способ подачи материала - проводник на этом пути. Надеюсь, твой энтузиазм желание делиться своим опытом никогда не иссякнет, да хранит тебя Карло Акутис!
Я вроде бы завязал верстать, уже год работаю на стройке посмотрел это видео и понял, надо что сверстать
Возвращайтесь, у нас тут тоже интересно
Вадим, спасибо Вам за этот обзор! Все отлично объяснено!⚡
За gap в Flex большое спасибо. Не знал. Grid усердно учил, но ради правильного подвала на странице не использовал в связи с одной неадекватной проблемой, которую не мог решить - блок внутри грида не принимал 100% от рассчитанной ширины, где внутри были флексы. Но! Применения и уникальность Гриду я нашел и он незаменим! Мы пишем блоки в любом порядке, а отображаем по указанной схеме как нам нужно. В одном проекте я заменил таблицу на грид, поскольку таблица при сжатии может только сжиматься, а текст внутри переносится, но если столбцов 5-6, то на маленьком экране выглядит очень некрасиво и тогда нам нужно перерисовать таблицу целиком так, чтоб некоторые значения ставали рядом не по вертикали, а делили горизонталь и тоже самое в шапке таблицы. Как такое сделать в таблице? Никак. Можно только две таблицы делать и одну прятать, а другую показывать. Но получается, что нам наплевать на СЕО и роботов поисковика. Спам. А с Гридом мы можем сделать таблицу широкую или компактную. Пример сдесь chistota.kiev.ua/city-kiev/6-generalnaya_uborka.html (таблица с ценами)
На самом деле это практически самая распространённая задача в вёрстке. В интернете куча примеров косых. Но наконец-то есть человек, который объясняет просто, как надо делать правильно. Вообще очень жаль, что нет кнопку, которая удаляет всю ту чушь, которая говорит о том, как делать неправильно. И это касается абсолютно всего.
Спасибо огромное за отличное объяснение, благодарен, что увидел Ваш канал. Надеюсь когда-нибудь вы продолжите выпускать новые видео!
Боже, какой офигенный канал. Спасибо тебе, ты так приятно преподносишь контент, такое объяснение, атмосфера видео. Супер!
Очень здорово, спасибо!)
У меня тоже постоянно в голове мысль, а правильно ли я делаю что-то на CSS, хотя верстаю уже 10 лет. Надо быть очень увлеченным чтобы на всё ответы знать (искать), у тебя это получается отлично. Так держать, у тебя есть чему поучиться!
Ваууу, align-items в гридах!!! Здорово!!!
…
Ниче, что и у флексов он есть и иконки ровняются тоже не плохо, коть в bg, хоть так
Вы кажется не поймали самую главую идею этого видео: используйте что хотите, где хотите. Разрешаю!
Вадим, спасибо за урок. Теперь стало понятнее, почему гриды лучше использовать...
Большое спасибо Вам за видео, было очень полезно, особенно благодаря примерам с кнопками, теперь буду пользоваться гридами чуть свободнее)
Использую в основном гриды для более сложных конструкций (типа галлереи), а также там, где нужна чёткая структура, всё по линиям. Был очень рад, когда узнал, что gap с флексами работает ... до того момента пока не открыл сафари, в итоге пришлось во всём проекте эмулировать gap с помощью двухстороннего margin и отрицательного у контейнера. Колхоз, не красиво, но работает и в сафари в том числе )
Вообще тема очень интересная, лайк от меня )
прям как у нас на работе) гриды и флексы для разных целей. Перепутаешь- атата!
И какие у вас там правила?
@@pepelsbey скелет сайта на гридах, внутренние блоки с помощью флексов
А если гриды в кнопке, то публичная порка? Ну что за религиозные глупости.
спасибо, Вадим, очень интересно ! Задумался сразу, а ведь я тоже использую гриды только когда не нахожу других вариантов. После этого рассказа, возможно мне будет легче использовать гриды по умолчанию, без задания размеров сетки :) Однако задумался, а как бы я задавал отступ для иконки этой кнопки, не посмотрев видео, и не думая о свойстве gap ... И в том случае я бы чуть задумался и писал такое: .button__icon + .button__text { margin-left: 10px }. :) Однако, согласен полностью, с gap это стало выглядеть изящнее и проще )
супер ! все просто и понятно
Как раз недавно столкнулся с этим и вот вышел видос. Зашёл я такой узнать что и где использовать, а мне говорят используй что хочешь и где хочешь))) Круто!
Спасибо за видео! (феечка CSS топ. Должна быть на следующий футболке)
Нужно текст обернуть в span и ему задать margin-left. И через first-child указать что у первого элемента margin: 0. И когда иконка исчезнет, то margin обнулится :) а у иконки его и так нет:) шах и мат скептики:)
Действительно, звучит гораздо проще!
Вадим, спасибо за ваш труд! Зачастую, ограничиваюсь гридами только из-за поддержки старых браузеров) Хотелось бы услышать про все нюансы браузера Сафари от вас.
Мне подача материала понравилась. благодарю
Вадим, спасибо за видео! Также был убеждён что гриды должны быть в только в основе страницы. Переубедили) Буду пробовать использовать их и на других элементах!
Эх, надо проработать гриды. Чет всё на флексах делаю :(
Жиза...
Но так не хочется с флексов уходить, тут всё так просто
Такая же фигня))
у гридов поддержка хуже
@@alenache1 уже не)
Гриды в кнопках - фантастика и подумать и могу что можно это свойство к ним применять! А еще все чаще убеждаюсь в том, что только за счет оверпрайснутой стоимости техники яблочной компании, большинство людей считают интернет эксплорер плохим браузером!)))
Нет, цены на технику тут совсем не причём. Просто есть браузеры, которые тормозят. Таким был IE, похоже ведёт себя Safari.
Спасибо за видео! Отличная мысль!!! Всегда так делал, за что не раз был осужден коллегами, теперь буду просто отправлять на Ваше видео)
Надпись на футболке как бы говорит :)
Спасибо! использую и гриды и флексы, но для разных задач. Есть блок с флексами и есть блок с гридами, гриды в основном для фото...
Как вовремя я вас нашла.)
Вадим, благодарю! Как всегда все четко и понятно
Отличная работа, Вадим! Спасибо!) На счёт поддержки display: grid/flex у тега button: тоже столкнулся с такой проблемой, конкретно с поддержкой flex у кнопки в safari, года эдак 3-4 назад. Не знаю, побороли ли они эту проблему в своем браузере, но теперь мне страшно использовать flex напрямую для тега button в принципе. Вместо этого, оборачиваю внутреннее содержимое кнопки в блок и уже ему задаю display: flex/grid. Да это некрасиво, но это работает в safari)
Полезный видос, Вадим! Спасибо! Обертка внутри кнопок спасет мир.
Спасибо за объяснение где, что нужно использовать. Видео как и всегда на высоте: Быстро, четко, по теме, с юмором! Приятно смотреть - трудно оторваться. Пошел искать ссылку под видео как стать патроном, хочу первым смотреть такие видосики =))). Такие проекты нужно поддерживать 😍
Спасибо 🥰
Блин, спасибо за спойлер) Потому что я такой: "Хм... А что, есть какие-то правила? Разве я не могу их использовать как хочу?" А вон тут все в заголовке написано)
Вадим ты красавчик, жаль что нет новых выпусков.
Спасибо! еще один кирпичик в мой фундамент знаний)
Огромное Вам, Вадим, спасибо. Я - в восторге! Просто чудесно! Успехов!
Спасибо, очень полезный контент!
Спасибо большое! Не так давно в вертске и все удивляюсь, как люди не пользуются гридами, ведь это такой на самом деле мощный инструмент.
Привычка, я вот года два на флексах верстаю
От себя могу сказать, использовать надо, что лучше ложиться Вам в голову и не противоречит принятому в проекте.
Калассссно рассказывает 👍👍👍👍👍
Большое Спасибо!
Как всегда круто! Лайк. Хотелось бы увидеть видео с Сафари что там все плохо или что-то работает(Только канул ie теперь Сафари даже шрифты там работают по-своему уже сталкивался везде нормальной шрифт работал в сафари же он становился жирным.)
На фразе рельсы в начале, в голове возникла мысль сразу про Ruby on Rails
Вадим, здравсвуйте. Очень актуальная тема. Спасибо большое за объяснение)
Спасибо, за информацию, было интересно!!
Сафари - это современный IE. Все возможные баги можно найти именно в этом браузере.
Вы неправы, Safari - это современный Safari. Положение и ситуации браузеров несравнимы.
@@pepelsbey если что, это не буквально. Имеется в виду, что в Сафари настолько много багов, что его можно сранить с IE 10 лет назад. И это не только мое субьективное мнение. Я использую Хром во время работы и во время работы уверен, что FF и Edge будут работать также хорошо, но не Safari. Там всегда есть проблемы. Хоть минимальные, но есть. И это я не говорю еще о мобильном Сафари.
Сразу влюбился в канал🙏 Спасибо за ваши труды!!!
Борюсь с убеждением, что использовать grid не стоит нигде, кроме сетки. В этом же убеждено и большинство моих коллег, которые крутят пальчиком у виска, когда я пытаюсь убедить их в обратном. Спасибо большое за полезное видео! )
Для себя решил так. Начал использовать гриды на проекте для вёрстки сетки элементов с плиточным/карточным интерфейсом. В остальном пока только флексы. И у меня нет поддержки старых браузеров :)
Надеюсь, что я всё же зародил зерно сомнения и когда вам нужно будет сделать сложную раскладку в кнопке, вы вспомните про гриды
Хороший контент, красавчик. Отличная подача.
Хорошо рассказал)
Очень круто
Читал книгу "CSS in Depth", так вот там был ответ на данный вопрос такой. Grid лучше использовать для разметки больших блоков, flex для элементов внутри этих блоков
Читал книку «Depth in CSS», там был ответ на данный вопрос: флексы лучше использовать для больших блоков, гриды внутри для элементов.
Видите, оба наши мнения имеют один и тот же вес, пока в них не добавить аргументацию. Но даже тогда это будет личным выбором каждого. В этом видео я постарался показать, как гриды могут быть где угодно и нет никаких ограничений, только ваше удобство.
Спасибо. Очень интересно.
Очень полезно! Хорошо обобщил
Вадим, как всегда, спасибо за полезный контент!
К флексам привык, а гриды всегда привлекают своими возможностями) как только гриды и в сафари будут работать отлично, то думаю большинство на гриды перейдёт) не без Вашего участия)
navi davi!
Посмотрю после работы, но за название (особенно последние 3 слова) уже лайк)
Спасибо Вадим.
Спасибо, открыл глаза на этот стереотип
Круто, очень круто )
Лайк и подписка!
Ставлю Вас пример в нашей онлайн-школе IT-технологий)
Балдеж! Спасибо!
Спасибо.
Спасибо Вам, рад что вас нашел
В сафари кажется grid-column-gap сработает. Раньше тоже маялся с вопросом а использовать ли где то в кнопках гриды. А потом плюнул и начал использовать везде, где они хорошо выполняли свою роль)
Там, к сожалению, в принципе display: grid не срабатывает на кнопке. Точнее, не срабатывал - только что приехал апдейт 14.0.1, где это починили. Вот же хитрецы.
Как обычно-safari умножает на ноль прогресс в css и это видео тоже
Вадим, как обычно, на высоте!! так держать
Спасибо)
Гриды тоже в основном для структурных элементов использовал
Оч крутой контент, спасибо за старания))
Учусь верстать недавно, не успел нахвататься ограничений, "верстаю как хочу".
Видимо еще не прошел школу бутстрапа.
Да в страпе ничего такого, вы сами можете продумать и сотворить свой.
Просто заранее определите классы для поведения элементов, я лично использую класс который определяет флекс и флекс колумн. Просто запарился как то печатать постоянно. Мне правда проще я фул стек.
Удачи в освоении, начинайте учить бекенд, это поможет в понимании вёрстки, как бы странно это не звучало.
Если будут вопросы не стесняйтесь gleb.sharapov@yahoo.com .
Дошел до конпки лайка табом и нажал пробел. И понял что это удобно
zdorovo
Как всегда на высоте.
Вадим, не перестану говорить Вам спасибо! За Вашу работу, разборы, интерес к своему делу. да и в целом, умеете Вы заинтересовать и заставить подумать. Мало того, теперь еще и о механической клавиатуре постоянно думаю) подскажите, пожалуйста, что можно взять новичку в этом деле? Чтобы Вы посоветовали?
Вам спасибо, что смотрите :) Начать можно с SK64, она недорогая, сравнительно свежая и есть варианты с разными переключателями и блютусом.
@@pepelsbey Спасибо! Думаю, на НГ можно себе подарок сделать )
Доброго времени Вадим. Очень отличные ролики, смотрю с большим удовольствием. После просмотра данного видео не могу ответить себе на вопрос, может быть вы раскроете мне глаза. Вопрос следующий - почему после того как мы задали элементам "а" и "button" объявление display: grid или flex, то ссылка ведёт себя предсказуемо, а именно растягивается на всю ширину родителя, в то время как элемент button этого не делает, а пляшет исключительно от своего содержимого. Вот так задачка. Всю голову уже сломал, никак не могу найти ответа. Есть конечно предположения что это связано с их изначальным значением display, но с другой стороны мы же его переопределяем. Буду рад если вернете моё психическое состояние в изначальное положение, а то уже не могу больше ни о чём думать. Заранее спасибо.
А как же старый добрый селектор * + * внутри кнопки с margin left ?)
А вообще крутая идея видео, теперь дождаться бы Сафари и можно праздновать😎
Да, сова * + * тоже сработает :) Но с гэпами гораздо лучше. Что интересно, в Safari 14.0.1 (только что вышло обновление) гриды уже заработали.
Подписался
Используйте CSS Grid только в крайних случаях:
1) вы не можете обойтись без изменения позиционирования элементов в CSS
2) вы не можете флексами сделать так, чтобы некоторые границы пересекались крестиком
Иначе рискуете напороться на проблемы с гридами, и придется переделывать все на flex. CSS Grid не является заменой flex, и не нужно все верстать на гридах.
Используйте флексы только в крайних случаях:
1. Вы не можете обойтись без изменения позиционирования в CSS
2. Вы не можете гридами сделать так, чтобы некоторые границы пересекались крестиком
Иначе вы рискуете напороться на проблемы с флексами и придётся всё переделывать на гридах. Флексы не являются заменой гридам, и не нужно всё верстать на флексах.
Я подумал, что будет интересно перевернуть вашу фразу. Она звучит так же «аргументированно», но утверждает обратное. Мне кажется, что в вас говорит привычка и подспудные страхи перед новым.
Мне бы такую фею, которая за меня верстать будет)
Не травите душу, мне надо совместимость с IE11 поддерживать на проекте. =(
Держитесь, будет проще: Microsoft изо всех сил старается его увести с рынка
Вадим добрый день.Хочу спросить не по теме.Есть ли у тебя видео про то, как правильно использовать в верстке margin и padding.Не могу найти хорошее виде, где будет объяснено какое и как свойство правильно применять чтобы верстка не ломалась.
Это слишком базовые знания, их нужно подробно и специально готовить. Я целюсь в уже практикующих разработчиков в своих видео.
Понял.Спасибо.Я не прошу Вас обьяснять, думал что есть ресурс или может видео хорошее, где это подробно рассказано.
Спасибо за видео Вадим! У меня только один вопрос, не загружает ли такой подход CSS парсер внутри браузера? То есть возможно ли для CSS парсера удобнее и быстрее будет рассчитывать и парсит и создавать CSSOM с margin-right вместо grid gap?
Вы слишком много переживаете за парсинг и работу CSS, это далеко не самое узкое место в современном фронтенде. Так что нет, гриды с гэпами не медленнее отступов - по крайней мере, вы не сможете это уверенно определить в реальных условиях.
Люди, о которых речь в первую минуту: вчера были большие, но по пять, а сегодня маленькие, но по три.
Сейчас гэпы на флексах в сафари работают
👍
Вот всё время и останавливает от использования гридов то, что беда с ними что в десктопном сафари, что в мобильном... А заказчики часто смотрят с айфонов результаты вёрстки
Беда в каком смысле? Есть коллекция проблем с гридами github.com/rachelandrew/gridbugs
@@pepelsbey ну то что gap в сафари не работает и у меня ещё какие-то проблемы с кнопками были под мобильным сафари, сейчас уже точно не вспомню. Спасибо за видео и за ссылку, поизучаю =)
Пожалуйста подскажите: Как заменить бутстраповский col-lg-4 col-md-6 col-sm-12 на CSS FLEX (GRID)? и почему не использовать Bootstrap вместо CSS FLEX (GRID)?
Мне кажется вы первым вопросом ответили на второй. Если вы знаете как работают флексы и гриды, вам не нужно конвертировать классы в стили. Вы тогда просто знаете, как это сделать. Учите CSS, а не Bootstrap.
лайк за спойлер
Сэкономил вам 17 минут
Если одна иконка осталась можно ей задать марджин-райт:0 если она only-of-type, например
…или просто использовать gap, чтобы код читался легче )
Можно реализовать все это дело через @supports и никаких оберток не нужно будет делать.
Вот не понимал я гридов и их пользы...кажись меня просветили!:)Спасибо!
т.е. для совместимости лучше не использовать совсем новые функции
В общем сидим пока на margin-right
Да нет, одновремено с выходом видео появилась Safari 14.0.1, где гриды заработали в кнопках.
а как же селектор лоботомированной совы? .button > * + *. селекторы можно Уже использовать, но идея толкаться слева на право
проблему с отступами решает
Вам придётся выбирать: либо отступ слева, либо справа. И тогда вы сможете без проблем убрать либо текст, либо иконку. Свойство gap работает в обе стороны.
Красота - это здорово! А кто-нибудь сравнивал скорость всего этого "хозяйства"?
Почувствовать, что гриды медленнее, скажем, флексов у вас получится, если всё остальное идеально оптимизируете и вам станет скучновато. Так что не переживайте :)
Возможно, вопрос немного не в тему, но всё же, подскажите, пожалуйста:
Допустим, есть макет, на котором заголовок сайта находится под hero-image, на этом hero-image есть еще какие-то ярлыки с информацией. Обычно нас это не пугает - мы размещаем в разметке заголовок, а также остальной контент, как полагается, затем регулируем порядок через свойство order в CSS.
Вопрос: влияет ли на SEO вся эта котовасия с разницей в порядке элементов (визуальная часть/разметка)?
SEO - это, конечно, та еще магия, но может кто-то все-таки в курсе? Есть у некоторых коллег мнение, что разметка должна обязательно совпадать с визуальной частью, иначе SEO пострадает, но лично мне это кажется бредом.
Визуальное расположение не интересует поисковых роботов, насколько мне известно. Сделайте удобный, быстрый и доступный сайт, который понравится пользователям и поисковики это заметят и полюбят вас.
@@pepelsbey спасибо за ответ!) Постараюсь убедить в этом коллег)