CSS Grid, flexbox, float в чем разница и как использовать Практический пример
HTML-код
- Опубликовано: 2 июн 2024
- ↓↓↓ Тайм-коды в описании ↓↓↓
Уроки по CSS Grid на нашем канале:
• Подробная инструкция по CSS Grid: • CSS Grid - самая понят...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт курса: 27-го Мая 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт курса: 3-го Июня 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
Это единственный канал с уроками которые без воды, с понятной подачей инфы. Спасибо)
Нет, есть Фрiлансер по життю
спасибо огромное! очень полезное видео!
Спасибо! Отлично объясняете.
Спасибо большое - просто, четко, доступно
Cпасибо!!! Всё доходчиво и понятно!!!
спасибо! как раз актуальная тема)
Крутой мастер класс. Это как глава в учебнике по верстке, понятным языком. Пошёл за ручкой с блокнотом...
Отличное видео, автор молодец, спасибо. Подписка однозначно!
Спасибо, интересна была реализация на инлайн-блок и флоатах
Юра,маэстро вы фокусник,маг ,профессионал .Спасибо
Большое спасибо!!!
Круто!
Большое спасибище!)
Наглядный пример того что Grid лучше, просто, и легче чем Flex. А если использовать их совместно то это еще лучше!
5:00 Ещё есть интересные способы очистки float - значение overflow кроме visible родителю или display: flow-root родителю
nicely explained 👌
Молодец, Спасибо
Пасиибо, очень мило, всё понятно. Жить можно
спасибо)
Красава
Спасибо
Крутяк!!!
Спасибо ,гриды удобная штука ,на флотах блоки не верстаются,правильно? Это типа плохой тон. А вот гриды прекрасно . Просто и со вкусом
Отлично подали информацию,только не увидел,куда добавлена картинка с карточки продукта в html нет, в CSS тоже не заметил,или не увидел))
как мы далеко ушли) помню еще по урокам Евгения Попова учился
а где можно посмотреть начальный код со стилями?
24:42 А почему justify-content, если для гридов justify-items?
А да, на MDN написано, что justify-content можно ещё с гридами использовать, но тогда зачем теперь justify-items?
justify-content работает и с гридами:
developer.mozilla.org/ru/docs/Web/CSS/justify-content
для флекса gap уже тоже появился, скорее всего вместе с column и row gap-ами
Я вот только сейчас узнал об этом
Получается, что сейчас поддержка grid еще лучше, чем некоторых свойств flexbox ??
Я кстати не знал про column-gap и row-gap 😂 поэтому делал такие колонки гридами
А если карточки расположены не друг под другом, а допустим смещены, тоесть к примеру под одной карточкой расположены 2 других и 2-я занимает к примеру 60% пространства в контейнере, а 3-я 40% и все карточки идут зеркально. | 60%40% |
| 40%60% | и так далее, что в таком случае использовать?
Не до конца понял что нужно. Но тут либо давать определенным карточкам большую ширину (и возможно flex-grow) и выстраивать на флексе. Либо рисовать нужную сетку на гридах. Либо, вы описываете то что называется masonry grid и ее пока нативно реализовать не получится и надо смотреть js скрипты под это дело, загуглите.
10:05 Ты объясняешь, что делать отступ снизу неудобно, потому что ты не знаешь кол-во элементов снизу и поэтому нужно делать сверху, но ты ведь и сверху их не знаешь, и сбоку?
Ты же отнимать пиксели от wrapper'a можешь с любой стороны, так какая разница?
А 5сть предыдущее видео как делались карточки?
В Трансляциях есть запись стрима где верстали интернет магазин с этими карточками. ruclips.net/video/PdN9CbAON0k/видео.html
Большое спасибо, разжевали и засунули в рот как птенцу!
Попфильтр нужен к микрофону
Ну еще на фреймворках Bootstrap и Tailwind нужно было показать как это делается.
зачем?
@@rpnXN Для полноты
7:40 - ага кнш "30", но забыл упомянуть что мерджины накладываются а не суммируются и по факту там 15.
7:54 - смотри на экран и на отступ показанный инспектором. Горизонтально между карточками получилось по 30px
С каких пор женщина на фото - товар? )) Очень символично...
Товар - одежда, на фото - модель. Вы видите то что хотите видеть)
Хорошая замануха на курсы если они такие же подробные и ясные надо будет купить