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

  Переглядів 152,005

Ulbi TV

Ulbi TV

День тому

В этом курсе мы поработаем с 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

КОМЕНТАРІ: 222
@UlbiTV
@UlbiTV 3 роки тому
Таймкоды в описании!) Приятного просмотра!
@egorros3706
@egorros3706 Рік тому
Отличная работа, большое спасибо.
@DenKhaziev
@DenKhaziev 2 роки тому
Чистый восторг! Все бы обучающие ролики были такими краткими и в то же время ёмкими 👍
@sergeyborunov5551
@sergeyborunov5551 2 роки тому
Четко, когда что то уже знаешь, для повторения и оттачивания мастерства заходит, как нож в масло! Спасибо
@user-np4vg9pc5o
@user-np4vg9pc5o Рік тому
Как всегда-идеальная подача материала! Спасибо тебе Тимур!!!
@itpro952
@itpro952 3 роки тому
Быстро и лаконично, два хороших ролика и по флексу и по гридам
@UlbiTV
@UlbiTV 3 роки тому
Спасибо друг, с наступающим!)
@kelthusha
@kelthusha 2 роки тому
Очень годный гайд. Ни грамма воды, очень короткое приветствие, и очень много информации, которая подаётся так, что легко воспринимается мозгом
@ildartatar5144
@ildartatar5144 2 роки тому
ПРОСТО ВОСХИТИТЕЛЬНО. Самый понятный, короткий и емкий урок по grid.
@user-ik5zw7wr8z
@user-ik5zw7wr8z 2 роки тому
моё глубочайшее уважение автору. Кратко, по существу, и максимально информативно. Без левой воды, как и должно быть
@holyage3128
@holyage3128 2 роки тому
Вот это подача материала! Спасибо огромное за такой труд))
@evgeniykochetov1294
@evgeniykochetov1294 3 роки тому
Без воды и все понятно, супер!
@user-iy2ts7re4w
@user-iy2ts7re4w Рік тому
Отличное объяснение, быстро, без воды, побольше бы таких! Спасибо!
@mrrappbit
@mrrappbit 7 місяців тому
Божишь! Очень удобно изложен материал, быстро и понятно🎉
@AlekMuz
@AlekMuz 2 роки тому
Урок - Сила💪 Игра топ!👍
@user-be8dy2lw3n
@user-be8dy2lw3n 9 місяців тому
grid это прям любовь! это просто🔥 благодарю за доступное описание
@imaima7723
@imaima7723 2 роки тому
Однозначно одно из лучших видео по гридам
@boomz3132
@boomz3132 Рік тому
Отличное видео: все по полочкам и понятно. Также очень круто, что показан в конце пример использования (я считаю это очень важно) и есть ссылка на закрепление материала.
@user-gw6vn6vx8o
@user-gw6vn6vx8o 2 роки тому
Это просто бомба!! Спасибо за видео, все четко и по теме. Красава!
@alinaropotan3326
@alinaropotan3326 Рік тому
Спасибо большое! Кратко и доходчиво 👍
@antonblagoveshchenskiy2533
@antonblagoveshchenskiy2533 2 роки тому
Лучший ролик по основам грида, спасибо!
@user-lf1kx5sg9t
@user-lf1kx5sg9t Рік тому
Супер! Кратко и содержательно!👍
@masterng56
@masterng56 Рік тому
Очень коротко, очень лаконично, респект братан!
@11-april
@11-april 2 роки тому
Шикарное объяснение. Больше спасибо за видео. Почему я не наткнулся на Ваш канал раньше
@computercomputer3293
@computercomputer3293 7 місяців тому
Спасибо большое за ваш труд!
@coldtouch9099
@coldtouch9099 2 роки тому
Спасибо огромное, видос🔥
@emzer8874
@emzer8874 Місяць тому
Спасибо. Все четко и по делу, без лишней воды и лирики.
@Jane-ge7ho
@Jane-ge7ho 3 роки тому
Спасибо, как всегда во время 👍👍👍 С наступающим🎄🎅
@UlbiTV
@UlbiTV 3 роки тому
Спааааасииибоооо!!!))) и вас с наступающим!!!!
@marv2928
@marv2928 Рік тому
Сколько пересмотрел и перечитал, но разобрался только тут. Спасибо друг😉
@SchubertLife
@SchubertLife Рік тому
Объясняешь очень доступно. Только начинаю учить html, css. Что-то уже проясняется. Спасибо что делаешь такие видео 👍👍👍
@olgam414
@olgam414 Рік тому
Четко! Кратко! Браво!!!
@GsBluma
@GsBluma Рік тому
Наконец-то понятно, четко и доступно объяснены гриды. В документациях, учебниках и даже на курсах куча всего вперемешку и совершенно не понятно, что с этим делать в отличии от флексов. Надеюсь, теперь разберусь и с гридами. Спасибо!
@user-zf7oh5iv3l
@user-zf7oh5iv3l Рік тому
Как всегда на высоте!)
@yuriilukianovych8660
@yuriilukianovych8660 2 роки тому
Спасибо! Наконец дошли руки у меня до гридов. Теперь всё ясно, а то боялся что сложно и откладывал на потом...)))
@pandagep
@pandagep 8 місяців тому
спасибо, всё очень четко и понятно.
@user-bj8oe1gt3r
@user-bj8oe1gt3r 7 місяців тому
Просто великолепный ролик, кратко и лаконично, и главное что все понятно. в то время как другие блогеры сразу верстают с грид, ты показываешь базу к которой можно обращаться раз за разом как к инструкции. Спасибо за твои труды
@t.i.i8608
@t.i.i8608 Рік тому
Спасибо большое бро, всё чётко и ясно! Желаю тебе здоровья
@Piknichok
@Piknichok Рік тому
Очень полезное видео. Для закрепления знаний очень помогает. Спасибо! 😊
@DmitriyWDL
@DmitriyWDL 9 місяців тому
Спасибо. Пару новых вещей в Гридах для себя подчерпнул. Продолжай в том же духе!
@trustambassador
@trustambassador Рік тому
Спасибо огромное за такой труд
@stormd2902
@stormd2902 2 роки тому
Спасибо большое, Тимур.
@inferens
@inferens Рік тому
Благодаря Grid код сокращается довольно сильно. Очень удобный и функциональный инструмент. Спасибо за информативный видеоматериал
@rustamradzabov9572
@rustamradzabov9572 7 місяців тому
Урок интересный, спасибо.
@udodvd
@udodvd 2 місяці тому
все четко без всякой мути и по делу!
@PerryCoxer
@PerryCoxer 2 роки тому
Побольше бы таких видео с css примерами. Никогда не любил верстать. Потому что в какой-то момент получалась дичь. После пары твоих роликов я практически полюбил верстку :-)
@reginapopova3062
@reginapopova3062 2 роки тому
Все понятно и быстро) спасибо)
@Agent-D
@Agent-D Рік тому
Ваще зачётно ! Без воды. Все время только в голове крутилось : "помедленнее пожалуйста, я записываю". =). Ниче, пересмотрю с паузами. Лучший ролик по Гриду. Спасибо ! Подписался.
@MyNameIsRishat
@MyNameIsRishat Рік тому
Не зря подписался, очень ёмко и понятно.
@user-cc1tx7sz5p
@user-cc1tx7sz5p Рік тому
Отличный контент! Кто ясно мыслит - тот ясно излагает, респект.
@user-cw1wf5wi9q
@user-cw1wf5wi9q 2 роки тому
краткость и наглядность это круто)
@user-cd1sr5sx2r
@user-cd1sr5sx2r 3 роки тому
Спасибо за хорошую шпаргалку. "Мантра" перед сном. 👌
@UlbiTV
@UlbiTV 3 роки тому
😂👍 с мантрой круто сказал, спасибо!)
@user-vu6dn9il7y
@user-vu6dn9il7y Рік тому
Спасибо за быстрый и подробный урок!
@user-su3qm7fu9i
@user-su3qm7fu9i 6 місяців тому
спасибо тебе большое за твой труд! даже не верится что такая собранная и полезная информация за бесплатно! учусь в университете, ничего не понял из объяснений учителя, посмотрел твой урок, и сразу всё понял. удачи!
@khayaproduction5537
@khayaproduction5537 3 роки тому
Очень круто ! Спасибо большое ! 👍
@UlbiTV
@UlbiTV 3 роки тому
И вам спасибо!)
@dav1d05
@dav1d05 Рік тому
Ты просто лучший!
@Birdyk-qr9sx
@Birdyk-qr9sx Рік тому
Grid и Flex - это реально очень мощно
@rajapboyev3928
@rajapboyev3928 2 роки тому
Просто шикарно! Я смотрел очень много роликов по этим темам, и они просто водище, просто не могут донести смысл
@GPTalksZone
@GPTalksZone Рік тому
Отличные уроки! Очень сжато и четко. Продолжай в том же духе) upd. Внёс летпу в развитие канала - всем комментариям под роликом лайк поставил %)
@rocknani2223
@rocknani2223 2 роки тому
Помимо благодарности за такой полезный видос, посмотрю рекламку и лайк поставлю.
@pretty6444
@pretty6444 Рік тому
Спасибо за видео! 👍 Всё доступно описано. Даже эпизоды добавлены, просто нет слов как продумана подача - всё для удобства зрителя ). Вот бы все так подавали информацию... ! ...и за угрушку tnx!
@nastiakyrychenko284
@nastiakyrychenko284 Рік тому
Отличный емкий урок. Благодарю!
@user-zv7gu4rt1p
@user-zv7gu4rt1p Рік тому
Меньше воды, больше дела!!! Так держать!!! Крутой контент
@imaima7723
@imaima7723 2 роки тому
Отлично!Спасибо)
@user-zk3bc1lf8k
@user-zk3bc1lf8k 3 роки тому
Тимур, с Наступающим!!❄️💫⛄️❤️! Пусть в Новом году ваш канал процветает🎅🏻💋Вы молодец!
@UlbiTV
@UlbiTV 3 роки тому
Спасибо больше, Эзам, и вас с наступающим!)
@user-uu6fz5sk5x
@user-uu6fz5sk5x Рік тому
Очень полезное видео! Спасибо) Посмотрела видео, теперь перехожу к игре.
@danchi7990
@danchi7990 5 місяців тому
Вы просто умничка😊
@sargisgrigoryan704
@sargisgrigoryan704 2 роки тому
Спасибо за ролик
@user-iq5wx7qq4v
@user-iq5wx7qq4v 10 місяців тому
Тимур, огромное тебе спасибо за Грид Гарден!!!!!🤩
@RihaLV
@RihaLV Рік тому
Отличное видео! Спасибо очень помогло!
@vladyslavfx3892
@vladyslavfx3892 3 роки тому
Для поддержки канала)) Давай серию уроков про jest, тестировать можно одно из тех приложений что ты делал в предыдущих видео. Думаю многим будет актуально.
@falsetrue7910
@falsetrue7910 3 роки тому
Ждал это видео, спасибо, колокольчик не подводит :D
@UlbiTV
@UlbiTV 3 роки тому
Пхах)) спасибо!
@user-yr1ho2bj6r
@user-yr1ho2bj6r 2 роки тому
Спасиб за видео)
@deikun95
@deikun95 3 роки тому
Коротко и понятно! Спасибо за видос!) Хотелось бы отдельное видео по полноценной настройке вебпака для SPA на react или vue
@UlbiTV
@UlbiTV 3 роки тому
Спасибо друг!) запишу себе в список
@user-sx4fb5wn2d
@user-sx4fb5wn2d 2 роки тому
Краткость-сестра таланта!!! Благодарю за столь информативный ролик.
@Birdyk-qr9sx
@Birdyk-qr9sx Рік тому
Краткость в программировании приводит к ошибкам и так далее . Четкость слов и полноценное обьяснение приводит к успеху
@vitamax3777
@vitamax3777 2 роки тому
решил использовать грид теперь. Флексы конечно тоже классно, но грид сейчас мне очень помог, спасибо!
@jaa619
@jaa619 Рік тому
понравилась подача материала, все понятно, не то что у других ютуберов
@user-fo3mr6gm6y
@user-fo3mr6gm6y Рік тому
Мне было очень интересно! Спасибо. Подписываюсь.
@user-cw3gv1dq5p
@user-cw3gv1dq5p 3 роки тому
Красава, Мужик, Огромное Спасибо)
@UlbiTV
@UlbiTV 3 роки тому
Спасибо дружище!)
@m.kashin
@m.kashin Рік тому
Спасибо, все по делу! оставлю себе в закладке
@izvekovmn
@izvekovmn 24 дні тому
Шикарный урок. Максимально понятно, с примерами, можно пошаманить или применить на свой пет проект) Спасибо, автор!) Удачи, вам и успехов)
@mrdanil18
@mrdanil18 Рік тому
От души помог сильно))
@voorooniin
@voorooniin Рік тому
Гений! Спасибо
@bama2619
@bama2619 Рік тому
Супер спасибо!
@alexkodding9354
@alexkodding9354 2 роки тому
Спасибо друг )
@Brinzovik
@Brinzovik Рік тому
Если что-то вылетает из головы, это видео является лучшим напоминаем! Спасибо! grid css grid-template-areas grid-area grid-column grid minmax grid-auto-rows grid-gap display:grid
@sikinski1588
@sikinski1588 2 роки тому
Топ видос, спасибо! с:
@Vladikslavik
@Vladikslavik 2 роки тому
Классно и быстро освежает всё в голове. Не каждый день с гридами работаешь )) Единственное, для наглядности можно бы было элемент, над которым производятся манипуляции, закрасить отдельным цветом.
@Sergey-lg1ke
@Sergey-lg1ke 2 роки тому
мужик, ты топ. Только включил, пишу коммент авансом, в качестве не сомневаюсь
@user-fg7dp8uf3b
@user-fg7dp8uf3b Рік тому
Пишу спустя год, отличное объяснение, спасибо за ролик)
@TheProfessionalGambler
@TheProfessionalGambler 3 роки тому
Спасибо, супер видос!
@UlbiTV
@UlbiTV 3 роки тому
А где же полезные замечания???))) спасибо!)
@TheProfessionalGambler
@TheProfessionalGambler 3 роки тому
@@UlbiTV Мне лень😄 С Новым годом🥳
@UlbiTV
@UlbiTV 3 роки тому
@@TheProfessionalGambler спасибо!!) и тебя тоже!)
@Maratreason
@Maratreason 2 роки тому
Решил с сегодняшнего дня начать верстать на гридах. И тут на тебе. Такой шикарный урок! Огромная благодарность Тимур! И респект!
@UlbiTV
@UlbiTV 2 роки тому
Спасибо, Марат, за отзыв!
@adelinaromanova8353
@adelinaromanova8353 2 роки тому
Урок действительно шикарный!
@Viktorres1
@Viktorres1 2 роки тому
Гридопогружение! Круто!
@user-rj1eb7cj6v
@user-rj1eb7cj6v 2 роки тому
спасибо большое!
@greyneck812
@greyneck812 9 місяців тому
отличное видио, все просто и понятно 😮
@user-kp4ql5xu2o
@user-kp4ql5xu2o 2 роки тому
Все четко и по делу. В HTML академии тоже самое 2 часа рассказывают)
@irf1554
@irf1554 11 місяців тому
Спасибо бро👍
@maksrygaev657
@maksrygaev657 2 роки тому
Как всегда выручаешь спасибо! Щас с этим свифтом зпшку не переводят как только придет обязуюсь задонатить)
@dabroful
@dabroful Рік тому
Алилуя. Наконец-то я разобрался с гридами
@midzukumono
@midzukumono Рік тому
Молодец ) я оказывается подписан на этот канал - видимо до этого уже оценил.
@pavelb5410
@pavelb5410 Рік тому
Так всё понял, немного не понял с позициями 1/3, вот это мне кажется надо подробнее рассказать. И еще было бы неплохо показать на практике создание шаблона сайта адаптивного, на примере всех технологий. Чисто CSS , HTML я думаю это было бы отлично, так как в поисковике в основном текстовое описание функционала, что вводит в заблуждение 🤥. Да и по сути, нет уроков по созданию адаптивных современных шаблонов, с применением новых стандартов. Можно было бы сделать уроки, для разных типов шаблонов. Ну там 3 колонки старый тип, при этом адаптивный, еще в 2 колонки, и какой то бонусный вариант, может новостной шаблон с не стандартным выводом новостей. Думаю было бы отлично.
@rikenbaker1
@rikenbaker1 5 днів тому
Большое спасибо! Очень помоги в обучении
@needforspeed1040
@needforspeed1040 2 роки тому
спасибо всё понял пойду фрилансить
Mongo DB ПОЛНЫЙ КУРС
21:38
Ulbi TV
Переглядів 176 тис.
CSS Grid Layout. Свойства определения сетки grid-template и другие
22:41
Фрілансер по життю
Переглядів 187 тис.
I PUT MY ARMOR ON (Creeper) (PG Version)
00:19
Sam Green
Переглядів 5 млн
Flexbox or grid - How to decide?
18:51
Kevin Powell
Переглядів 687 тис.
What is the difference between Float, Flexbox and Grid CSS?
10:06
Анна Блок
Переглядів 216 тис.
Learn CSS Grid - A 13 Minute Deep Dive
13:35
Slaying The Dragon
Переглядів 423 тис.
Responsive web design in 37 minutes + layout. You don’t need Bootstrap!
36:44
Фрілансер по життю
Переглядів 1 млн
Infrared Soldering Iron from Cigarette Lighter
0:58
ALABAYCHIC
Переглядів 1,8 млн
Как открыть дверь в Jaecoo J8? Удобно?🤔😊
0:27
Суворкин Сергей
Переглядів 896 тис.
Почему сканер ставят так не удобно?
0:47
Не шарю!
Переглядів 654 тис.
I Was Never Meant to Have This Prototype CPU
21:53
Linus Tech Tips
Переглядів 1 млн
All New Atlas | Boston Dynamics
0:40
Boston Dynamics
Переглядів 5 млн
Phone charger explosion
0:43
_vector_
Переглядів 26 млн