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

Рет қаралды 21,077

Күн бұрын

↓↓↓ Тайм-коды в описании ↓↓↓
Уроки по CSS Grid на нашем канале:
• Подробная инструкция по CSS Grid: • CSS Grid - самая понят...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
7 уроков по 30 мин: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
Сайт школы ВебКадеми: 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

Пікірлер: 48

@relaxman3066 2 жыл бұрын

Это единственный канал с уроками которые без воды, с понятной подачей инфы. Спасибо)

@myata3256 Жыл бұрын

Нет, есть Фрiлансер по життю

@user-sc3mq2yi2z 2 жыл бұрын

Спасибо большое - просто, четко, доступно

@user-wc7hn5xz8j Жыл бұрын

Крутой мастер класс. Это как глава в учебнике по верстке, понятным языком. Пошёл за ручкой с блокнотом...

@cryfos Жыл бұрын

спасибо! как раз актуальная тема)

@therelaxingsound6903 Жыл бұрын

Спасибо! Отлично объясняете.

@DzmitryArtsiamkou Жыл бұрын

Cпасибо!!! Всё доходчиво и понятно!!!

@denwel.9551 2 жыл бұрын

Спасибо, интересна была реализация на инлайн-блок и флоатах

@sokol9720 2 жыл бұрын

Отличное видео, автор молодец, спасибо. Подписка однозначно!

@elenashlandakova2548 2 жыл бұрын

спасибо огромное! очень полезное видео!

@GGSoft2009 Жыл бұрын

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

@vaspurakavdalian1133 11 ай бұрын

Юра,маэстро вы фокусник,маг ,профессионал .Спасибо

@yurkaronin 2 жыл бұрын

Круто!

@RomanKhassazhirov Жыл бұрын

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

@denwel.9551 2 жыл бұрын

5:00 Ещё есть интересные способы очистки float - значение overflow кроме visible родителю или display: flow-root родителю

@user-cw6yh2hz5h Жыл бұрын

Наглядный пример того что Grid лучше, просто, и легче чем Flex. А если использовать их совместно то это еще лучше!

@0103442 2 жыл бұрын

Молодец, Спасибо

@Andrey-bt5jm 2 жыл бұрын

спасибо)

@sayedakbarali5650 2 жыл бұрын

nicely explained 👌

@mak_whisk Жыл бұрын

Спасибо

@savannah633 2 жыл бұрын

Пасиибо, очень мило, всё понятно. Жить можно

@user-xf8tk8np2h 2 жыл бұрын

Крутяк!!!

@innameleshko7834 2 жыл бұрын

Спасибо ,гриды удобная штука ,на флотах блоки не верстаются,правильно? Это типа плохой тон. А вот гриды прекрасно . Просто и со вкусом

@vaspurakavdalian1133 5 ай бұрын

Красава

@mihascooter8264 Жыл бұрын

Отлично подали информацию,только не увидел,куда добавлена картинка с карточки продукта в html нет, в CSS тоже не заметил,или не увидел))

@laar4539 Жыл бұрын

как мы далеко ушли) помню еще по урокам Евгения Попова учился

@user-bn7ij8cr1i 2 жыл бұрын

Я кстати не знал про column-gap и row-gap 😂 поэтому делал такие колонки гридами

@rpnXN 2 жыл бұрын

для флекса gap уже тоже появился, скорее всего вместе с column и row gap-ами

@user-bn7ij8cr1i 2 жыл бұрын

Я вот только сейчас узнал об этом

@user-po9ir8pv1m Жыл бұрын

а где можно посмотреть начальный код со стилями?

@denwel.9551 2 жыл бұрын

24:42 А почему justify-content, если для гридов justify-items? А да, на MDN написано, что justify-content можно ещё с гридами использовать, но тогда зачем теперь justify-items?

@WebCademy 2 жыл бұрын

justify-content работает и с гридами: developer.mozilla.org/ru/docs/Web/CSS/justify-content

@Be-le8vu 2 жыл бұрын

10:05 Ты объясняешь, что делать отступ снизу неудобно, потому что ты не знаешь кол-во элементов снизу и поэтому нужно делать сверху, но ты ведь и сверху их не знаешь, и сбоку? Ты же отнимать пиксели от wrapper'a можешь с любой стороны, так какая разница?

@user-or1hy4xz8u Жыл бұрын

Получается, что сейчас поддержка grid еще лучше, чем некоторых свойств flexbox ??

@katyabelostok4663 Жыл бұрын

А 5сть предыдущее видео как делались карточки?

@WebCademy Жыл бұрын

В Трансляциях есть запись стрима где верстали интернет магазин с этими карточками. kzfaq.info/get/bejne/hsp-bKaTprWyYJ8.html

@biscvie 5 ай бұрын

А если карточки расположены не друг под другом, а допустим смещены, тоесть к примеру под одной карточкой расположены 2 других и 2-я занимает к примеру 60% пространства в контейнере, а 3-я 40% и все карточки идут зеркально. | 60%40% | | 40%60% | и так далее, что в таком случае использовать?

@WebCademy 5 ай бұрын

Не до конца понял что нужно. Но тут либо давать определенным карточкам большую ширину (и возможно flex-grow) и выстраивать на флексе. Либо рисовать нужную сетку на гридах. Либо, вы описываете то что называется masonry grid и ее пока нативно реализовать не получится и надо смотреть js скрипты под это дело, загуглите.