Grid CSS полный курс за 13 минут. Все свойства

Поделиться
HTML-код
  • Опубликовано: 2 июн 2024
  • В этом курсе мы поработаем с grid layout css и кратко рассмотрим все свойства!
    Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
    Игра для закрепления знаний - cssgridgarden.com/#ru
    ↓↓↓ПЛЭЙЛИСТЫ ↓↓↓
    Собеседования -
    • Собеседования
    Полные практические курсы -
    • Crash курсы
    MobX & React -
    • Mobx & React Полный ку...
    Наглядная теория -
    • Наглядная теория
    Полный курс по Redux -
    • Redux
    React drag and drop -
    • Drag and drop на REACT JS
    React компоненты -
    • ReactJS компоненты
    React + Redux + Webpack
    • React Redux Webpack - ...
    Анимации в React -
    • Анимации в React. Reac...
    Разработка fullstack MERN web приложения -
    / playlistlist=pl6dxkon1...
    Таймкоды:
    00:00 - Теория
    01:00 - Начало работы
    01:50 - display: grid
    02:00 - grid-template-columns
    03:35 - grid-template-rows
    04:00 - grid-gap
    04:30 - grid-auto-rows
    05:05 - minmax()
    05:54 - justify-content
    06:12 - align-content
    06:43 - align-items
    07:01 - justify-items
    07:30 - justify-self
    07:46 - align-self
    08:00 - grid-column-start, grid-column-end
    08:30 - grid-row-start, grid-row-end
    10:20 - grid-template-areas, grid-area
    Поддержать меня и мой канал вы можете по ссылкам ниже.
    Qiwi кошелек - qiwi.com/n/BODYE821
    Яндекс деньги - yoomoney.ru/to/4100116193037469
  • НаукаНаука

Комментарии • 225

  • @DenKhaziev
    @DenKhaziev 2 года назад +90

    Чистый восторг! Все бы обучающие ролики были такими краткими и в то же время ёмкими 👍

  • @sergeyborunov5551
    @sergeyborunov5551 2 года назад +17

    Четко, когда что то уже знаешь, для повторения и оттачивания мастерства заходит, как нож в масло! Спасибо

  • @user-np4vg9pc5o
    @user-np4vg9pc5o Год назад +21

    Как всегда-идеальная подача материала! Спасибо тебе Тимур!!!

  • @ildartatar5144
    @ildartatar5144 2 года назад +4

    ПРОСТО ВОСХИТИТЕЛЬНО. Самый понятный, короткий и емкий урок по grid.

  • @kelthusha
    @kelthusha 2 года назад +4

    Очень годный гайд. Ни грамма воды, очень короткое приветствие, и очень много информации, которая подаётся так, что легко воспринимается мозгом

  • @user-ik5zw7wr8z
    @user-ik5zw7wr8z 2 года назад +2

    моё глубочайшее уважение автору. Кратко, по существу, и максимально информативно. Без левой воды, как и должно быть

  • @user-iy2ts7re4w
    @user-iy2ts7re4w Год назад +2

    Отличное объяснение, быстро, без воды, побольше бы таких! Спасибо!

  • @holyage3128
    @holyage3128 2 года назад +6

    Вот это подача материала! Спасибо огромное за такой труд))

  • @UlbiTV
    @UlbiTV  3 года назад +36

    Таймкоды в описании!) Приятного просмотра!

    • @egorros3706
      @egorros3706 Год назад

      Отличная работа, большое спасибо.

  • @user-be8dy2lw3n
    @user-be8dy2lw3n 10 месяцев назад +1

    grid это прям любовь! это просто🔥 благодарю за доступное описание

  • @itpro952
    @itpro952 3 года назад +22

    Быстро и лаконично, два хороших ролика и по флексу и по гридам

    • @UlbiTV
      @UlbiTV  3 года назад +1

      Спасибо друг, с наступающим!)

  • @evgeniykochetov1294
    @evgeniykochetov1294 3 года назад +4

    Без воды и все понятно, супер!

  • @emzer8874
    @emzer8874 2 месяца назад

    Спасибо. Все четко и по делу, без лишней воды и лирики.

  • @boomz3132
    @boomz3132 Год назад +1

    Отличное видео: все по полочкам и понятно. Также очень круто, что показан в конце пример использования (я считаю это очень важно) и есть ссылка на закрепление материала.

  • @mrrappbit
    @mrrappbit 8 месяцев назад +1

    Божишь! Очень удобно изложен материал, быстро и понятно🎉

  • @user-su3qm7fu9i
    @user-su3qm7fu9i 7 месяцев назад +1

    спасибо тебе большое за твой труд! даже не верится что такая собранная и полезная информация за бесплатно!
    учусь в университете, ничего не понял из объяснений учителя, посмотрел твой урок, и сразу всё понял. удачи!

  • @SchubertLife
    @SchubertLife Год назад +1

    Объясняешь очень доступно. Только начинаю учить html, css. Что-то уже проясняется. Спасибо что делаешь такие видео 👍👍👍

  • @Jane-ge7ho
    @Jane-ge7ho 3 года назад +6

    Спасибо, как всегда во время 👍👍👍 С наступающим🎄🎅

    • @UlbiTV
      @UlbiTV  3 года назад +2

      Спааааасииибоооо!!!))) и вас с наступающим!!!!

  • @GsBluma
    @GsBluma Год назад

    Наконец-то понятно, четко и доступно объяснены гриды. В документациях, учебниках и даже на курсах куча всего вперемешку и совершенно не понятно, что с этим делать в отличии от флексов. Надеюсь, теперь разберусь и с гридами. Спасибо!

  • @user-lf1kx5sg9t
    @user-lf1kx5sg9t Год назад +1

    Супер! Кратко и содержательно!👍

  • @yuriilukianovych8660
    @yuriilukianovych8660 2 года назад +3

    Спасибо! Наконец дошли руки у меня до гридов. Теперь всё ясно, а то боялся что сложно и откладывал на потом...)))

  • @user-bj8oe1gt3r
    @user-bj8oe1gt3r 8 месяцев назад

    Просто великолепный ролик, кратко и лаконично, и главное что все понятно. в то время как другие блогеры сразу верстают с грид, ты показываешь базу к которой можно обращаться раз за разом как к инструкции. Спасибо за твои труды

  • @AlenaRisk.
    @AlenaRisk. Год назад +1

    Сколько пересмотрел и перечитал, но разобрался только тут. Спасибо друг😉

  • @Agent-D
    @Agent-D Год назад +1

    Ваще зачётно ! Без воды. Все время только в голове крутилось : "помедленнее пожалуйста, я записываю". =). Ниче, пересмотрю с паузами. Лучший ролик по Гриду.
    Спасибо !
    Подписался.

  • @imaima7723
    @imaima7723 2 года назад +1

    Однозначно одно из лучших видео по гридам

  • @11-april
    @11-april 2 года назад +1

    Шикарное объяснение. Больше спасибо за видео. Почему я не наткнулся на Ваш канал раньше

  • @user-gw6vn6vx8o
    @user-gw6vn6vx8o 2 года назад +2

    Это просто бомба!! Спасибо за видео, все четко и по теме. Красава!

  • @antonblagoveshchenskiy2533
    @antonblagoveshchenskiy2533 2 года назад +1

    Лучший ролик по основам грида, спасибо!

  • @alinaropotan3326
    @alinaropotan3326 Год назад +2

    Спасибо большое! Кратко и доходчиво 👍

  • @inferens
    @inferens Год назад +2

    Благодаря Grid код сокращается довольно сильно. Очень удобный и функциональный инструмент. Спасибо за информативный видеоматериал

  • @DmitriyWDL
    @DmitriyWDL 10 месяцев назад

    Спасибо. Пару новых вещей в Гридах для себя подчерпнул. Продолжай в том же духе!

  • @t.i.i8608
    @t.i.i8608 Год назад +1

    Спасибо большое бро, всё чётко и ясно! Желаю тебе здоровья

  • @udodvd
    @udodvd 3 месяца назад

    все четко без всякой мути и по делу!

  • @mikeyfront
    @mikeyfront Месяц назад

    Шикарный урок. Максимально понятно, с примерами, можно пошаманить или применить на свой пет проект) Спасибо, автор!) Удачи, вам и успехов)

  • @masterng56
    @masterng56 2 года назад +1

    Очень коротко, очень лаконично, респект братан!

  • @user-cd1sr5sx2r
    @user-cd1sr5sx2r 3 года назад +6

    Спасибо за хорошую шпаргалку. "Мантра" перед сном. 👌

    • @UlbiTV
      @UlbiTV  3 года назад +1

      😂👍 с мантрой круто сказал, спасибо!)

  • @Piknichok
    @Piknichok Год назад

    Очень полезное видео. Для закрепления знаний очень помогает. Спасибо! 😊

  • @PerryCoxer
    @PerryCoxer 2 года назад +3

    Побольше бы таких видео с css примерами. Никогда не любил верстать. Потому что в какой-то момент получалась дичь. После пары твоих роликов я практически полюбил верстку :-)

  • @MyNameIsRishat
    @MyNameIsRishat 2 года назад +1

    Не зря подписался, очень ёмко и понятно.

  • @stormd2902
    @stormd2902 2 года назад +1

    Спасибо большое, Тимур.

  • @user-cc1tx7sz5p
    @user-cc1tx7sz5p Год назад

    Отличный контент! Кто ясно мыслит - тот ясно излагает, респект.

  • @user-zf7oh5iv3l
    @user-zf7oh5iv3l Год назад

    Как всегда на высоте!)

  • @rajapboyev3928
    @rajapboyev3928 2 года назад +1

    Просто шикарно! Я смотрел очень много роликов по этим темам, и они просто водище, просто не могут донести смысл

  • @trustambassador
    @trustambassador Год назад +1

    Спасибо огромное за такой труд

  • @Brinzovik
    @Brinzovik Год назад +2

    Если что-то вылетает из головы, это видео является лучшим напоминаем! Спасибо!
    grid css grid-template-areas grid-area grid-column grid minmax grid-auto-rows grid-gap display:grid

  • @AlekMuz
    @AlekMuz 2 года назад +2

    Урок - Сила💪 Игра топ!👍

  • @vitamax3777
    @vitamax3777 2 года назад +1

    решил использовать грид теперь. Флексы конечно тоже классно, но грид сейчас мне очень помог, спасибо!

  • @rocknani2223
    @rocknani2223 2 года назад +1

    Помимо благодарности за такой полезный видос, посмотрю рекламку и лайк поставлю.

  • @GPTalksZone
    @GPTalksZone Год назад +1

    Отличные уроки! Очень сжато и четко. Продолжай в том же духе) upd. Внёс летпу в развитие канала - всем комментариям под роликом лайк поставил %)

  • @user-uu6fz5sk5x
    @user-uu6fz5sk5x Год назад +1

    Очень полезное видео! Спасибо)
    Посмотрела видео, теперь перехожу к игре.

  • @pretty6444
    @pretty6444 Год назад

    Спасибо за видео! 👍 Всё доступно описано. Даже эпизоды добавлены, просто нет слов как продумана подача - всё для удобства зрителя ). Вот бы все так подавали информацию... ! ...и за угрушку tnx!

  • @user-vu6dn9il7y
    @user-vu6dn9il7y Год назад

    Спасибо за быстрый и подробный урок!

  • @RihaLV
    @RihaLV Год назад +1

    Отличное видео! Спасибо очень помогло!

  • @user-zv7gu4rt1p
    @user-zv7gu4rt1p Год назад +1

    Меньше воды, больше дела!!! Так держать!!! Крутой контент

  • @user-zk3bc1lf8k
    @user-zk3bc1lf8k 3 года назад +9

    Тимур, с Наступающим!!❄️💫⛄️❤️! Пусть в Новом году ваш канал процветает🎅🏻💋Вы молодец!

    • @UlbiTV
      @UlbiTV  3 года назад +1

      Спасибо больше, Эзам, и вас с наступающим!)

  • @vladyslavfx3892
    @vladyslavfx3892 3 года назад +4

    Для поддержки канала)) Давай серию уроков про jest, тестировать можно одно из тех приложений что ты делал в предыдущих видео. Думаю многим будет актуально.

  • @nastiakyrychenko284
    @nastiakyrychenko284 Год назад

    Отличный емкий урок. Благодарю!

  • @user-cw1wf5wi9q
    @user-cw1wf5wi9q 2 года назад +1

    краткость и наглядность это круто)

  • @computercomputer3293
    @computercomputer3293 8 месяцев назад

    Спасибо большое за ваш труд!

  • @khayaproduction5537
    @khayaproduction5537 3 года назад +5

    Очень круто ! Спасибо большое ! 👍

    • @UlbiTV
      @UlbiTV  3 года назад +1

      И вам спасибо!)

  • @user-fo3mr6gm6y
    @user-fo3mr6gm6y Год назад +1

    Мне было очень интересно! Спасибо. Подписываюсь.

  • @jaa619
    @jaa619 Год назад +1

    понравилась подача материала, все понятно, не то что у других ютуберов

  • @deikun95
    @deikun95 3 года назад +30

    Коротко и понятно! Спасибо за видос!) Хотелось бы отдельное видео по полноценной настройке вебпака для SPA на react или vue

    • @UlbiTV
      @UlbiTV  3 года назад +5

      Спасибо друг!) запишу себе в список

  • @coldtouch9099
    @coldtouch9099 2 года назад +1

    Спасибо огромное, видос🔥

  • @rustamradzabov9572
    @rustamradzabov9572 8 месяцев назад +1

    Урок интересный, спасибо.

  • @reginapopova3062
    @reginapopova3062 2 года назад +1

    Все понятно и быстро) спасибо)

  • @olgam414
    @olgam414 Год назад +1

    Четко! Кратко! Браво!!!

  • @rikenbaker1
    @rikenbaker1 Месяц назад

    Большое спасибо! Очень помоги в обучении

  • @user-iq5wx7qq4v
    @user-iq5wx7qq4v 11 месяцев назад

    Тимур, огромное тебе спасибо за Грид Гарден!!!!!🤩

  • @Vladikslavik
    @Vladikslavik 2 года назад +2

    Классно и быстро освежает всё в голове. Не каждый день с гридами работаешь )) Единственное, для наглядности можно бы было элемент, над которым производятся манипуляции, закрасить отдельным цветом.

  • @danchi7990
    @danchi7990 7 месяцев назад

    Вы просто умничка😊

  • @user-kp4ql5xu2o
    @user-kp4ql5xu2o 2 года назад +1

    Все четко и по делу. В HTML академии тоже самое 2 часа рассказывают)

  • @Birdyk-qr9sx
    @Birdyk-qr9sx Год назад +1

    Grid и Flex - это реально очень мощно

  • @user-sx4fb5wn2d
    @user-sx4fb5wn2d 2 года назад +3

    Краткость-сестра таланта!!! Благодарю за столь информативный ролик.

    • @Birdyk-qr9sx
      @Birdyk-qr9sx Год назад +1

      Краткость в программировании приводит к ошибкам и так далее . Четкость слов и полноценное обьяснение приводит к успеху

  • @Sergey-lg1ke
    @Sergey-lg1ke 2 года назад

    мужик, ты топ. Только включил, пишу коммент авансом, в качестве не сомневаюсь

  • @pandagep
    @pandagep 9 месяцев назад

    спасибо, всё очень четко и понятно.

  • @m.kashin
    @m.kashin Год назад

    Спасибо, все по делу! оставлю себе в закладке

  • @dav1d05
    @dav1d05 2 года назад +1

    Ты просто лучший!

  • @maksrygaev657
    @maksrygaev657 2 года назад +1

    Как всегда выручаешь спасибо! Щас с этим свифтом зпшку не переводят как только придет обязуюсь задонатить)

  • @midzukumono
    @midzukumono Год назад +1

    Молодец ) я оказывается подписан на этот канал - видимо до этого уже оценил.

  • @user-cw3gv1dq5p
    @user-cw3gv1dq5p 3 года назад +5

    Красава, Мужик, Огромное Спасибо)

    • @UlbiTV
      @UlbiTV  3 года назад

      Спасибо дружище!)

  • @user-fg7dp8uf3b
    @user-fg7dp8uf3b Год назад +1

    Пишу спустя год, отличное объяснение, спасибо за ролик)

  • @imaima7723
    @imaima7723 2 года назад +1

    Отлично!Спасибо)

  • @Viktorres1
    @Viktorres1 2 года назад +1

    Гридопогружение! Круто!

  • @Maratreason
    @Maratreason 2 года назад +4

    Решил с сегодняшнего дня начать верстать на гридах. И тут на тебе. Такой шикарный урок!
    Огромная благодарность Тимур! И респект!

    • @UlbiTV
      @UlbiTV  2 года назад

      Спасибо, Марат, за отзыв!

    • @adelinaromanova8353
      @adelinaromanova8353 2 года назад

      Урок действительно шикарный!

  • @mrdanil18
    @mrdanil18 Год назад +1

    От души помог сильно))

  • @dmitrykarpovich186
    @dmitrykarpovich186 2 года назад +1

    Всё ясно и понятно, спасибо огромное) А ты при написании кода пишешь юнит тесты? может мог бы сделать видео с примерами?)

  • @bama2619
    @bama2619 Год назад +1

    Супер спасибо!

  • @greyneck812
    @greyneck812 11 месяцев назад

    отличное видио, все просто и понятно 😮

  • @voorooniin
    @voorooniin Год назад +1

    Гений! Спасибо

  • @johnnysel8186
    @johnnysel8186 3 года назад +38

    Grid CSS полный курс за 13 минут. Все свойства

    • @UlbiTV
      @UlbiTV  3 года назад +2

      Так точно!) спасибо!

    • @deneaz
      @deneaz Год назад +1

      ладно

    • @enkomium
      @enkomium Год назад

      Это прям все-все свойства или есть еще?

    • @miyagi_man
      @miyagi_man Год назад

      ​@@enkomiumПрактичоски все

  • @paveltryhan4245
    @paveltryhan4245 Год назад

    Я в шоке, чувак очень мощный, подписка и учусь благодаря тебе бро, спасибо , заработаю первый кэш, тебе запулю, очень доступно быстро и понятно , буду практиковаться, я еще в начале , но бля с тобой я быстро доберусь до цели , благодать тебе бро

  • @dabroful
    @dabroful Год назад

    Алилуя. Наконец-то я разобрался с гридами

  • @TheProfessionalGambler
    @TheProfessionalGambler 3 года назад +5

    Спасибо, супер видос!

    • @UlbiTV
      @UlbiTV  3 года назад +1

      А где же полезные замечания???))) спасибо!)

    • @TheProfessionalGambler
      @TheProfessionalGambler 3 года назад +2

      @@UlbiTV Мне лень😄 С Новым годом🥳

    • @UlbiTV
      @UlbiTV  3 года назад +2

      @@TheProfessionalGambler спасибо!!) и тебя тоже!)

  • @sargisgrigoryan704
    @sargisgrigoryan704 2 года назад +1

    Спасибо за ролик

  • @404piano
    @404piano 3 года назад +2

    больше хотелось бы видео по верстке, ui фрэймворком, чтобы прям закрыть пробел по fullstack контенту :)

  • @alexkodding9354
    @alexkodding9354 2 года назад +1

    Спасибо друг )

  • @user-yr1ho2bj6r
    @user-yr1ho2bj6r 2 года назад +1

    Спасиб за видео)

  • @sikinski1588
    @sikinski1588 2 года назад +1

    Топ видос, спасибо! с:

  • @user-so2ky9vc1r
    @user-so2ky9vc1r 11 дней назад

    Без пауз, все четко и быстр