CSS Grid - самая понятная инструкция с примерами по гридам (сеткам) в CSS

  Переглядів 96,753

ВебКадеми | Юрий Ключевский

ВебКадеми | Юрий Ключевский

День тому

↓↓↓ Тайм-коды ↓↓↓
В этом уроке мы подробно изучим работу с сеткой 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 - Приветствие
00:30 - Основы сетки. Колонки, ряды, отступы
04:03 - Фракции
05:46 - Функция repeat()
08:03 - Функция minmax()
11:15 - Направление контента. grid-auto-flow
12:04 - Явная и неявная сетки. Размеры по умолчанию для рядов и колонок
15:20 - Автоматические колонки auto-fill и auto-fit
20:07 - Перемещение ячеек внутри сетки
28:36 - Выравнивание ячеек внутри колоно и рядов
33:32 - Сокращенная запись grid-template
35:00 - Области сетки grid areas
41:10 - Вложенные сетки
42:25 - Пример CSS grid в верстке сайта
48:45 - Завершение

КОМЕНТАРІ: 209
@eduardkhomiak9747
@eduardkhomiak9747 2 роки тому
На данный момент это лучшее объяснение гридов, что я встречал
@gritsienkooleg3447
@gritsienkooleg3447 2 роки тому
Поддерживаю!
@pascalsparadox9211
@pascalsparadox9211 Рік тому
А там они как может и не дураки остальные но вплане падагогики нифига у них не выходит.много кривляний многт лишних слов,прирывают свою же мысль постоянно
@user-ey1eq4ch4j
@user-ey1eq4ch4j Рік тому
@@pascalsparadox9211 Вам просто не повезло. Но таких классных учителей, как Юрий - действительно, очень мало.
@irinadim
@irinadim Рік тому
И на данный момент это лучшее объяснение гридов) Спасибо огромное, Юрий.
@asgard7815
@asgard7815 Місяць тому
Чувааааак, я на каждом видео по гридам это слышу
@1MrAnonymous11
@1MrAnonymous11 2 роки тому
Сразу видно, у человека огромный скилл умения преподносить информацию для учащихся .
@XaHyMaH
@XaHyMaH 3 місяці тому
Привет вам из 2024. Надеюсь вы живы и здоровы. У нас тут уже нет проблем с gap. Но всё равно спасибо, исчерпывающе понятный гайд.
@yurydaszukiewicz1033
@yurydaszukiewicz1033 Рік тому
Без понтов, спокойно, доходчиво и очень грамотно!!! Пересмотрел 5 разных лекторов, понял только тут xDDD
@user-fd8jj3hj4i
@user-fd8jj3hj4i Рік тому
Пожалуй это лучшее описание grid верстки из всех что видел!!!
@McBossRacerSever
@McBossRacerSever 3 роки тому
row-grap на флексах уже поддерживается в сафари. спасибо за урок.
@viktor_kobozya
@viktor_kobozya Рік тому
Название ролика полностью соответствует содержанию. Смотрел другие видосы, здесь разжевано максимально подробно.
@vilk4355
@vilk4355 3 роки тому
Всё никак не мог понять, что за гриды и с чём их едят. Спасибо за такое простое доступное разъяснение!
@vladimirbelonogov5993
@vladimirbelonogov5993 Рік тому
Пока это лучший гайд по гридам из всех которые я видел))) Ограмное вам спасибо!!!!!
@yanbelov8319
@yanbelov8319 Рік тому
Вы лучший!!! Спасибо большое. Нигде не мог найти досконального объяснения с примерами. Все по фактам и все что нужно. без воды !!! Огромное вам Спасибо.
@oksyoksy6632
@oksyoksy6632 Рік тому
Уже месяц, как пытаюсь освоить CSS по разным видео. 😢. Юрий, Вы лучший из лучших!!!!💪💪💪👍👍
@user-uz6og6ks1x
@user-uz6og6ks1x 4 місяці тому
Определенно один из лучших каналов по веб-разработке! Всегда очень понятная и актуальная информация 👍
@radist126
@radist126 Рік тому
Наверное , это лучшее объяснение гридов. Легко зашло.
@sarxanhasanov2547
@sarxanhasanov2547 Рік тому
Огромное 🙏. Объсняете просто 👍. 👋из Баку.
@lettersanddigits
@lettersanddigits 2 роки тому
это лучшее объяснение сеток, которое я встречал в русскоязычном ютубе
@Anatoli-bq1pe
@Anatoli-bq1pe Рік тому
Благодарю! Это лучшее, что я смотрел про Grid. Все четко и по делу
@pavelb5410
@pavelb5410 Рік тому
Охиренный урок, 👍 наверное самый подробный. Спасибо большое тебе, за то что вложил душу, и помогаешь людям понять материал! Всем добра!
@user-ct1lk7jq6o
@user-ct1lk7jq6o Рік тому
единственный кто смог рассказать ПОНЯТНО! спасибо за грамотное объяснение!
@user-bj8oe1gt3r
@user-bj8oe1gt3r 5 місяців тому
самый полный и понятный урок на ютубе по гридам
@user-dq3ip9zz1r
@user-dq3ip9zz1r 3 роки тому
Каждый урок здесь - на вес золота
@apelsin4ik2901
@apelsin4ik2901 10 місяців тому
Спасибо за урок! Неужели я освоил Grid-ы) Много видео пересмотрел, но такой ролик из тысячи по grid-ам мне не встречался. Всё ясно, понятно, структурировано, а главное разжевано. Поймёт даже маленький ребёнок. Ещё раз спасибо, удачи в последующих роликах. Автор молодец 👍🔥🔥🔥
@easy-Code
@easy-Code Рік тому
Автору огромное СПАСИБО!!! Лучшее видео про Grid! Всё просто и понятно объяснено.
@uvencosuper3471
@uvencosuper3471 Рік тому
Действительно, максимально доходчиво и понятно! Я до этого трое суток плевался от позиционирования в цсс, нервов истратил вагон. Матерился на тех, кто это придумал. Вроде настрою всё, что то добавляю - и всё расплылось снова. Грид - это в целом всё, что мне нужно от цсс. Полностью покрывает мои потребности. Спасибо!
@user-yn3qf8fv6v
@user-yn3qf8fv6v 3 роки тому
Наконец-то доходчиво объяснили разницу между auto-fill и auto-fit.
@WebCademy
@WebCademy 3 роки тому
😀✌️
@user-it7oh7hb9i
@user-it7oh7hb9i 2 роки тому
Огромное спасибо, все по полочкам, понятно даже для начинающего, без каких-то знаний.
@user-sf2lb3qe8k
@user-sf2lb3qe8k 6 місяців тому
Хороший туториал. Достаточно фундамнентально.
@alanpuch2243
@alanpuch2243 8 місяців тому
Юрий, благодарю за ясное и чёткое объяснение материала
@user-ey1eq4ch4j
@user-ey1eq4ch4j Рік тому
Действительно, очень понятно изложено. Таких Учителей (с большой буквы) по пальцам одной руки можно пересчитать. Кроме Юрия, автора этого видео, могу отметить ещё Вадима Макеева и Жеку Андриканича. Тоже прекрасные гуру. Юрий, Вадим и Евгений - самые лучшие учители, которые мне встречались на просторах рунета. Лайк, однозначно и в рекомендации начинающим. Прекрасный учебный материал.
@maxsam5741
@maxsam5741 Рік тому
очень доступное объяснение с качественными примерами! спасибо вам за ваш труд
@user-pt1te3uh7f
@user-pt1te3uh7f 3 місяці тому
Круто и просто объяснил, респект Автору,просто шикарно
@hoffmann646
@hoffmann646 2 роки тому
Несколько раз пересмотрел, чтобы все на практике усвоить) Мало кто дает настолько большое количество практики)
@user-fo6kh9ff2k
@user-fo6kh9ff2k Рік тому
Спасибо большое, только у вас понял, что это за чудо такое - этот grid)
@cameron2505
@cameron2505 6 місяців тому
ich bin begeistert! Es ist so deutig! Und genau das, was ich gebraucht habe!
@NoFear144
@NoFear144 2 роки тому
Превосходное объяснение! Спасибо Юрий за данное обучающее видео!
@user-qh9yz2ro7r
@user-qh9yz2ro7r 2 роки тому
Супер!!! спасибо!
@Number-iu5wr
@Number-iu5wr 3 роки тому
Круто!!! 😍😍😍
@TheAlletar
@TheAlletar 3 роки тому
Крутой урок! Спасибо :)
@itbloom9322
@itbloom9322 2 роки тому
Благодарю!
@-Forever-Young-
@-Forever-Young- 2 роки тому
Спасибо за разъяснение) !
@mishachubenko3394
@mishachubenko3394 Рік тому
Дякую тобі , що ти зробив це відео для нас, воно дуже користне і твоя подача робить його дуже фаховим. Я зараз вчу грід, і твоя робота мені дуже помогає !!!
@rs_man
@rs_man 2 роки тому
Отличный урок. Благодарю 👍
@RomanKhassazhirov
@RomanKhassazhirov Рік тому
Спасибо, за то что ты делаешь, всё просто и без воды! :)
@taketano
@taketano 3 роки тому
Очень доступно, спасибо
@_pheax
@_pheax 3 роки тому
спасибо вам!
@DmitriyTernov
@DmitriyTernov Рік тому
Круто! Спасибо!
@danl5713
@danl5713 Рік тому
круто, огромное спасибо!!!
@user-qs4xz1ub9i
@user-qs4xz1ub9i 3 роки тому
спасибо за урок!
@useruseroff6605
@useruseroff6605 2 роки тому
Спасибо за подробное представление Grid CSS!
@d_r_robot
@d_r_robot 3 роки тому
Наконец-то урок!
@MrWEBNEO
@MrWEBNEO 2 роки тому
Отличный урок, спасибо!
@ridge_crm
@ridge_crm Рік тому
потрясающе!
@user-oc5dv3op5m
@user-oc5dv3op5m 2 роки тому
Большое спасибо за компактное объяснение модели грид!
@bohdanmarchenko
@bohdanmarchenko Рік тому
Спасибо большое!
@annaandrukhanenko206
@annaandrukhanenko206 3 роки тому
спасибо! очень доступное объяснение!
@yurye.4945
@yurye.4945 2 роки тому
супер, спасибо!
@Liliia394
@Liliia394 2 роки тому
Спасибо!!! Очень круто объяснили!!
@NikolayBarkalov
@NikolayBarkalov 2 роки тому
Спасибо!!!
@daudsatiyadzhiev3505
@daudsatiyadzhiev3505 2 роки тому
Хороший урок. Спасибо!
@user-lh6mi1cb5m
@user-lh6mi1cb5m 11 місяців тому
спасибо большое!
@dmitryck8721
@dmitryck8721 2 роки тому
Все доходчиво и понятно, спасибо за видео
@shishik123
@shishik123 2 роки тому
Супер спасибо!
@user-jf5ly9mg7h
@user-jf5ly9mg7h 2 роки тому
Спасибо за видео, все легко и понятно
@giper_molot
@giper_molot 2 роки тому
Очень информативно однозначно лайк
@romanlavrentov312
@romanlavrentov312 2 роки тому
спасибо! нашёл в этом тут, что искал.
@dimamaik8923
@dimamaik8923 2 роки тому
Супер)
@nik_zdorov
@nik_zdorov 2 роки тому
Супер!
@artemalekseev6885
@artemalekseev6885 2 роки тому
Очень доходчиво и грамотно! Спасибо вам!
@igorkl5167
@igorkl5167 Рік тому
Просто суперский урок по гридам! Спасибо автору за труд!
@progerlife6690
@progerlife6690 2 роки тому
огонь!!!Спасибо как раз учу Гриды!
@vuviy1711
@vuviy1711 2 роки тому
очень хороший урок, спасибо
@ynwa2290
@ynwa2290 2 роки тому
очень полезное видео. Большое спасибо
@luxarmiger5729
@luxarmiger5729 2 роки тому
Спасибо, Юрий! Как всегда понятно, исчерпывающе. У вас лучшие уроки1
@dimitriitkach7697
@dimitriitkach7697 2 роки тому
спасибо за урок - CSS Grid - самая понятная инструкция с примерами по гридам (сеткам) в CSS
@user-qc2ol5ee2y
@user-qc2ol5ee2y Рік тому
Огромное спасибо, все очень доходчиво и просто.
@alexgrinberg1888
@alexgrinberg1888 2 роки тому
Прекрасный Курс. Четко и понятно. С нетерпением жду ваших новых выпусков по верстке! Спасибо.
@voltrage1933
@voltrage1933 2 роки тому
Спасибо вам огромное за ваши полезные видео очень круто объясняете !
@q_loo6342
@q_loo6342 2 роки тому
Прекрасно объясняете
@ais1273
@ais1273 2 роки тому
Все гениальное - просто.🥰 приятно слушать и наполнение то, что нужно!
@warcraft.mp4889
@warcraft.mp4889 3 місяці тому
И правда ооочень годно, спасибо вам😊
@user-vq7xe7fq2n
@user-vq7xe7fq2n 2 роки тому
+ Отличный видео пособие!
@alexasanchobetherestors9962
@alexasanchobetherestors9962 Рік тому
Отличный урок. Сохранил однажды и использую как шпаргалку - если что не знаю или забыл. Проще и лучше просто невозможно сделать, все максимально доступно изложено. Значительно помогло улучшить код и увеличить скорость верстки. Спасибо!
@gritsienkooleg3447
@gritsienkooleg3447 2 роки тому
Вот это круто! Спасибо вам за шикарно преподнесенную информацию! Так интересно, понятно и легко! Пошёл гридить)
@user-jb4zp2ll2d
@user-jb4zp2ll2d Рік тому
все круто с меня лайк!
@user-vc9bv9fj3f
@user-vc9bv9fj3f 2 роки тому
доходчиво, спасибо
@user-gk4ye4zh5x
@user-gk4ye4zh5x 10 місяців тому
Юрий, спасибо Вам огромное! Оказывается, гриды вовсе не страшны. Раньше читала, смотрела, было очень сложно. Теперь вижу явные преимущества. Всего Вам хорошего!
@user-pe7dz5xg7v
@user-pe7dz5xg7v Рік тому
Спасиииииииииииибооо!!! Очень помогло!!!!
@user-td2im1mi2s
@user-td2im1mi2s Рік тому
круто. Спасибо, я понял всё с одного раза.
@asg5511
@asg5511 Рік тому
Супер видео!!! Очень полезная инфа!
@MariZlnva
@MariZlnva Рік тому
Очень понятное объяснение. Спасибо
@user-sj8mw6wp3v
@user-sj8mw6wp3v 2 роки тому
Отлично рассказывает, смотрел несколько объяснений - это топчик!
@Yaxomor
@Yaxomor 2 роки тому
Отличная подача информации.
@albertrockalfredo8250
@albertrockalfredo8250 Рік тому
Крутецкий ролик! респект!
@user-fy6kf8hq2v
@user-fy6kf8hq2v Рік тому
Лучшее что мне попадалось на глаза! Спасибо
@ZoooLoooS25
@ZoooLoooS25 Рік тому
Спасибо огромное за такой понятный урок по гридам!!! Очень бы хотелось увидеть такой же гид по флексу!!
@1ifehappens
@1ifehappens Рік тому
Хорошая подача!
@natural_bornboogie
@natural_bornboogie Рік тому
Чувак, ты лучший!
@khushbuStudioAkbarpur
@khushbuStudioAkbarpur Рік тому
well understood. Thank you you are the best teacher.
@dedlive51
@dedlive51 2 роки тому
Спасибо, у Вас хорошо получается объяснять.
@user-ti5ps6hd4o
@user-ti5ps6hd4o 9 місяців тому
Очень крутое видео! Спасибо! Стало понятнее!
@user-cb5et3vu7q
@user-cb5et3vu7q 9 місяців тому
Спасибо брат
Ошибки в HTML верстке сайтов. Никогда не верстай так
22:34
ВебКадеми | Юрий Ключевский
Переглядів 22 тис.
CSS Grid, flexbox, float   в чем разница и как использовать  Практический пример
26:31
Она Постояла За Себя! ❤️
00:25
Глеб Рандалайнен
Переглядів 3,2 млн
Мама забыла взять трубочку для колы
00:25
Даша Боровик
Переглядів 528 тис.
What is the difference between Float, Flexbox and Grid CSS?
10:06
Анна Блок
Переглядів 216 тис.
Responsive Dashboard Layouts with CSS Grid
24:54
ByteGrad
Переглядів 47 тис.
CSS Grid Layout. Свойства определения сетки grid-template и другие
22:41
Фрілансер по життю
Переглядів 187 тис.
Бесплатный курс по верстке. Верстка сайта на HTML и CSS. 2024. 4k
9:23
ВебКадеми | Юрий Ключевский
Переглядів 837
CSS Grid Layout. Практика + шпаргалка.
34:22
Фрілансер по життю
Переглядів 172 тис.
Learn CSS Grid - A 13 Minute Deep Dive
13:35
Slaying The Dragon
Переглядів 434 тис.
flex-basis, flex-grow, flex-shrink. flexbox погружение
43:31
От 0 до 1
Переглядів 29 тис.
Она Постояла За Себя! ❤️
00:25
Глеб Рандалайнен
Переглядів 3,2 млн