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

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ธ.ค. 2024

ความคิดเห็น • 51

  • @vaspurakavdalian1133
    @vaspurakavdalian1133 ปีที่แล้ว +1

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

  • @relaxman3066
    @relaxman3066 2 ปีที่แล้ว +16

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

    • @myata3256
      @myata3256 2 ปีที่แล้ว +1

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

  • @RomanKhassazhirov
    @RomanKhassazhirov ปีที่แล้ว +1

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

  • @warhouse634
    @warhouse634 5 หลายเดือนก่อน +1

    Мужик, спасибо. Только не удаляй это видео, чтоб мы могли подглядывать впредь. А то в голове не укладывается вся эта фигня с правилами обтеканий.

  • @vaspurakavdalian1133
    @vaspurakavdalian1133 11 หลายเดือนก่อน +1

    Красава

  • @mak_whisk
    @mak_whisk ปีที่แล้ว

    Спасибо

  • @Ochenopasniy
    @Ochenopasniy 3 หลายเดือนก่อน +1

    Юрчик, видео топ 👍

  • @LAAR_admin
    @LAAR_admin 2 ปีที่แล้ว +2

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

  • @Лазаар
    @Лазаар 2 ปีที่แล้ว +3

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

  • @cryfos
    @cryfos 2 ปีที่แล้ว +1

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

  • @yurkaronin
    @yurkaronin 3 ปีที่แล้ว +2

    Круто!

  • @DzmitryArtsiamkou
    @DzmitryArtsiamkou 2 ปีที่แล้ว +1

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

  • @ИмяФамилия-ю5з6м
    @ИмяФамилия-ю5з6м ปีที่แล้ว +4

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

  • @АндрейПетров-ф9о
    @АндрейПетров-ф9о 2 ปีที่แล้ว +2

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

  • @GGSoft2009
    @GGSoft2009 2 ปีที่แล้ว

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

  • @savannah633
    @savannah633 2 ปีที่แล้ว

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

  • @therelaxingsound6903
    @therelaxingsound6903 ปีที่แล้ว

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

  • @0103442
    @0103442 2 ปีที่แล้ว

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

  • @sokol9720
    @sokol9720 2 ปีที่แล้ว +1

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

  • @denwel.9551
    @denwel.9551 3 ปีที่แล้ว

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

  • @elenashlandakova2548
    @elenashlandakova2548 3 ปีที่แล้ว

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

  • @Andrey-bt5jm
    @Andrey-bt5jm 3 ปีที่แล้ว

    спасибо)

  • @КостяШевкин-з5х
    @КостяШевкин-з5х 3 ปีที่แล้ว

    Крутяк!!!

    • @innameleshko7834
      @innameleshko7834 3 ปีที่แล้ว

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

  • @sayedakbarali5650
    @sayedakbarali5650 2 ปีที่แล้ว

    nicely explained 👌

  • @denwel.9551
    @denwel.9551 3 ปีที่แล้ว +1

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

  • @rpnXN
    @rpnXN 3 ปีที่แล้ว +1

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

  • @mihascooter8264
    @mihascooter8264 ปีที่แล้ว

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

  • @denwel.9551
    @denwel.9551 3 ปีที่แล้ว +1

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

    • @WebCademy
      @WebCademy  3 ปีที่แล้ว +1

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

  • @egorrublev5529
    @egorrublev5529 2 ปีที่แล้ว

    Хорошая замануха на курсы если они такие же подробные и ясные надо будет купить

  • @biscvie
    @biscvie ปีที่แล้ว

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

    • @WebCademy
      @WebCademy  ปีที่แล้ว

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

  • @АлексейКомлев-т4с
    @АлексейКомлев-т4с 2 ปีที่แล้ว

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

  • @katyabelostok4663
    @katyabelostok4663 ปีที่แล้ว

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

    • @WebCademy
      @WebCademy  ปีที่แล้ว +1

      В Трансляциях есть запись стрима где верстали интернет магазин с этими карточками. th-cam.com/video/PdN9CbAON0k/w-d-xo.html

  • @ДмитрийНормов-ю6ц
    @ДмитрийНормов-ю6ц 2 ปีที่แล้ว

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

  • @Дзауров-к7х
    @Дзауров-к7х 2 ปีที่แล้ว

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

  • @Be-le8vu
    @Be-le8vu 3 ปีที่แล้ว

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

  • @ВладПашковский-ц2э
    @ВладПашковский-ц2э ปีที่แล้ว

    Большое спасибо, разжевали и засунули в рот как птенцу!

  • @KeeperKnowledge
    @KeeperKnowledge ปีที่แล้ว +1

    7:40 - ага кнш "30", но забыл упомянуть что мерджины накладываются а не суммируются и по факту там 15.

    • @WebCademy
      @WebCademy  ปีที่แล้ว

      7:54 - смотри на экран и на отступ показанный инспектором. Горизонтально между карточками получилось по 30px

  • @alexdreamer11
    @alexdreamer11 3 ปีที่แล้ว +1

    Ну еще на фреймворках Bootstrap и Tailwind нужно было показать как это делается.

    • @rpnXN
      @rpnXN 3 ปีที่แล้ว

      зачем?

    • @alexdreamer11
      @alexdreamer11 3 ปีที่แล้ว

      @@rpnXN Для полноты

  • @АлександрМыкало-п2я
    @АлександрМыкало-п2я 2 ปีที่แล้ว

    С каких пор женщина на фото - товар? )) Очень символично...

    • @WebCademy
      @WebCademy  2 ปีที่แล้ว +1

      Товар - одежда, на фото - модель. Вы видите то что хотите видеть)

    • @warhouse634
      @warhouse634 5 หลายเดือนก่อน

      А вдруг это чья-то мама? ))

  • @uvencosuper3471
    @uvencosuper3471 2 ปีที่แล้ว

    Попфильтр нужен к микрофону