Тёмный

CSS Grid, flexbox, float. В чем разница и как использовать. Практический пример 

ВебКадеми | Юрий Ключевский
Подписаться 57 тыс.
Просмотров 22 тыс.
50% 1

Опубликовано:

 

30 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 51   
@relaxman3066
@relaxman3066 2 года назад
Это единственный канал с уроками которые без воды, с понятной подачей инфы. Спасибо)
@myata3256
@myata3256 2 года назад
Нет, есть Фрiлансер по життю
@vaspurakavdalian1133
@vaspurakavdalian1133 Год назад
Юра,маэстро вы фокусник,маг ,профессионал .Спасибо
@warhouse634
@warhouse634 3 месяца назад
Мужик, спасибо. Только не удаляй это видео, чтоб мы могли подглядывать впредь. А то в голове не укладывается вся эта фигня с правилами обтеканий.
@LAAR_admin
@LAAR_admin Год назад
как мы далеко ушли) помню еще по урокам Евгения Попова учился
@Лазаар
@Лазаар 2 года назад
Крутой мастер класс. Это как глава в учебнике по верстке, понятным языком. Пошёл за ручкой с блокнотом...
@RomanKhassazhirov
@RomanKhassazhirov Год назад
Большое спасибище!)
@cryfos
@cryfos 2 года назад
спасибо! как раз актуальная тема)
@DzmitryArtsiamkou
@DzmitryArtsiamkou 2 года назад
Cпасибо!!! Всё доходчиво и понятно!!!
@vaspurakavdalian1133
@vaspurakavdalian1133 10 месяцев назад
Красава
@АндрейПетров-ф9о
@АндрейПетров-ф9о 2 года назад
Спасибо большое - просто, четко, доступно
@mak_whisk
@mak_whisk Год назад
Спасибо
@yurkaronin
@yurkaronin 3 года назад
Круто!
@ИмяФамилия-ю5з6м
Наглядный пример того что Grid лучше, просто, и легче чем Flex. А если использовать их совместно то это еще лучше!
@therelaxingsound6903
@therelaxingsound6903 Год назад
Спасибо! Отлично объясняете.
@GGSoft2009
@GGSoft2009 2 года назад
Большое спасибо!!!
@savannah633
@savannah633 2 года назад
Пасиибо, очень мило, всё понятно. Жить можно
@0103442
@0103442 2 года назад
Молодец, Спасибо
@sokol9720
@sokol9720 2 года назад
Отличное видео, автор молодец, спасибо. Подписка однозначно!
@denwel.9551
@denwel.9551 3 года назад
Спасибо, интересна была реализация на инлайн-блок и флоатах
@egorrublev5529
@egorrublev5529 2 года назад
Хорошая замануха на курсы если они такие же подробные и ясные надо будет купить
@denwel.9551
@denwel.9551 3 года назад
5:00 Ещё есть интересные способы очистки float - значение overflow кроме visible родителю или display: flow-root родителю
@mihascooter8264
@mihascooter8264 Год назад
Отлично подали информацию,только не увидел,куда добавлена картинка с карточки продукта в html нет, в CSS тоже не заметил,или не увидел))
@sayedakbarali5650
@sayedakbarali5650 2 года назад
nicely explained 👌
@elenashlandakova2548
@elenashlandakova2548 3 года назад
спасибо огромное! очень полезное видео!
@Ochenopasniy
@Ochenopasniy 2 месяца назад
Юрчик, видео топ 👍
@rpnXN
@rpnXN 3 года назад
для флекса gap уже тоже появился, скорее всего вместе с column и row gap-ами
@АлексейКомлев-т4с
@АлексейКомлев-т4с 2 года назад
Я вот только сейчас узнал об этом
@Andrey-bt5jm
@Andrey-bt5jm 3 года назад
спасибо)
@КостяШевкин-з5х
@КостяШевкин-з5х 3 года назад
Крутяк!!!
@innameleshko7834
@innameleshko7834 3 года назад
Спасибо ,гриды удобная штука ,на флотах блоки не верстаются,правильно? Это типа плохой тон. А вот гриды прекрасно . Просто и со вкусом
@denwel.9551
@denwel.9551 3 года назад
24:42 А почему justify-content, если для гридов justify-items? А да, на MDN написано, что justify-content можно ещё с гридами использовать, но тогда зачем теперь justify-items?
@WebCademy
@WebCademy 3 года назад
justify-content работает и с гридами: developer.mozilla.org/ru/docs/Web/CSS/justify-content
@АлексейКомлев-т4с
@АлексейКомлев-т4с 2 года назад
Я кстати не знал про column-gap и row-gap 😂 поэтому делал такие колонки гридами
@ДмитрийНормов-ю6ц
@ДмитрийНормов-ю6ц 2 года назад
Получается, что сейчас поддержка grid еще лучше, чем некоторых свойств flexbox ??
@katyabelostok4663
@katyabelostok4663 Год назад
А 5сть предыдущее видео как делались карточки?
@WebCademy
@WebCademy Год назад
В Трансляциях есть запись стрима где верстали интернет магазин с этими карточками. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-PdN9CbAON0k.html
@Дзауров-к7х
@Дзауров-к7х 2 года назад
а где можно посмотреть начальный код со стилями?
@biscvie
@biscvie 11 месяцев назад
А если карточки расположены не друг под другом, а допустим смещены, тоесть к примеру под одной карточкой расположены 2 других и 2-я занимает к примеру 60% пространства в контейнере, а 3-я 40% и все карточки идут зеркально. | 60%40% | | 40%60% | и так далее, что в таком случае использовать?
@WebCademy
@WebCademy 11 месяцев назад
Не до конца понял что нужно. Но тут либо давать определенным карточкам большую ширину (и возможно flex-grow) и выстраивать на флексе. Либо рисовать нужную сетку на гридах. Либо, вы описываете то что называется masonry grid и ее пока нативно реализовать не получится и надо смотреть js скрипты под это дело, загуглите.
@Be-le8vu
@Be-le8vu 3 года назад
10:05 Ты объясняешь, что делать отступ снизу неудобно, потому что ты не знаешь кол-во элементов снизу и поэтому нужно делать сверху, но ты ведь и сверху их не знаешь, и сбоку? Ты же отнимать пиксели от wrapper'a можешь с любой стороны, так какая разница?
@KeeperKnowledge
@KeeperKnowledge Год назад
7:40 - ага кнш "30", но забыл упомянуть что мерджины накладываются а не суммируются и по факту там 15.
@WebCademy
@WebCademy Год назад
7:54 - смотри на экран и на отступ показанный инспектором. Горизонтально между карточками получилось по 30px
@ВладПашковский-ц2э
Большое спасибо, разжевали и засунули в рот как птенцу!
@alexdreamer11
@alexdreamer11 3 года назад
Ну еще на фреймворках Bootstrap и Tailwind нужно было показать как это делается.
@rpnXN
@rpnXN 3 года назад
зачем?
@alexdreamer11
@alexdreamer11 3 года назад
@@rpnXN Для полноты
@АлександрМыкало-п2я
С каких пор женщина на фото - товар? )) Очень символично...
@WebCademy
@WebCademy 2 года назад
Товар - одежда, на фото - модель. Вы видите то что хотите видеть)
@warhouse634
@warhouse634 3 месяца назад
А вдруг это чья-то мама? ))
@uvencosuper3471
@uvencosuper3471 Год назад
Попфильтр нужен к микрофону
Далее
Flexbox or grid - How to decide?
18:51
Просмотров 737 тыс.
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,6 млн
CSS GRID Большое руководство
1:10:16
Просмотров 65 тыс.