Тёмный

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

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

↓↓↓ Тайм-коды в описании ↓↓↓
Уроки по CSS Grid на нашем канале:
• Подробная инструкция по CSS Grid: • CSS Grid - самая понят...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Тайм-коды
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
00:00 - Введение и рекомендации
01:37 - Знакомство с проектом
04:10 - Реализация на float
11:56 - Реализация на inline-block
16:40 - Реализация на flex-box
21:45 - Реализация на Grid CSS

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

 

11 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

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