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

↓↓↓ Тайм-коды ↓↓↓
В этом уроке мы подробно изучим работу с сеткой 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 - Завершение

[@eduardkhomiak9747]

На данный момент это лучшее объяснение гридов, что я встречал

[@gritsienkooleg3447]

Поддерживаю!

[@pascalsparadox9211]

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

[@user-ey1eq4ch4j]

@@pascalsparadox9211 Вам просто не повезло. Но таких классных учителей, как Юрий - действительно, очень мало.

[@irinadim]

И на данный момент это лучшее объяснение гридов) Спасибо огромное, Юрий.

[@asgard7815]

Чувааааак, я на каждом видео по гридам это слышу

[@1MrAnonymous11]

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

[@yurydaszukiewicz1033]

Без понтов, спокойно, доходчиво и очень грамотно!!! Пересмотрел 5 разных лекторов, понял только тут xDDD

[@XaHyMaH]

Привет вам из 2024. Надеюсь вы живы и здоровы. У нас тут уже нет проблем с gap. Но всё равно спасибо, исчерпывающе понятный гайд.

[@McBossRacerSever]

row-grap на флексах уже поддерживается в сафари. спасибо за урок.

[@vilk4355]

Всё никак не мог понять, что за гриды и с чём их едят. Спасибо за такое простое доступное разъяснение!

[@user-fd8jj3hj4i]

Пожалуй это лучшее описание grid верстки из всех что видел!!!

[@viktor_kobozya]

Название ролика полностью соответствует содержанию. Смотрел другие видосы, здесь разжевано максимально подробно.

[@TheAlletar]

Крутой урок! Спасибо :)

[@oksyoksy6632]

Уже месяц, как пытаюсь освоить CSS по разным видео. 😢. Юрий, Вы лучший из лучших!!!!💪💪💪👍👍

[@ridge_crm]

потрясающе!

[@DmitriyTernov]

Круто! Спасибо!

[@useruseroff6605]

Спасибо за подробное представление Grid CSS!

[@radist126]

Наверное , это лучшее объяснение гридов. Легко зашло.

[@MrWEBNEO]

Отличный урок, спасибо!

[@user-oc5dv3op5m]

Большое спасибо за компактное объяснение модели грид!

[@NoFear144]

Превосходное объяснение! Спасибо Юрий за данное обучающее видео!

[@-Forever-Young-]

Спасибо за разъяснение) !

[@rs_man]

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

[@alexgrinberg1888]

Прекрасный Курс. Четко и понятно. С нетерпением жду ваших новых выпусков по верстке! Спасибо.

[@daudsatiyadzhiev3505]

Хороший урок. Спасибо!

[@vladimirbelonogov5993]

Пока это лучший гайд по гридам из всех которые я видел))) Ограмное вам спасибо!!!!!

[@annaandrukhanenko206]

спасибо! очень доступное объяснение!

[@dmitryck8721]

Все доходчиво и понятно, спасибо за видео

[@Liliia394]

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

[@artemalekseev6885]

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

[@giper_molot]

Очень информативно однозначно лайк

[@danl5713]

круто, огромное спасибо!!!

[@sarxanhasanov2547]

Огромное 🙏. Объсняете просто 👍. 👋из Баку.

[@Number-iu5wr]

Круто!!! 😍😍😍

[@romanlavrentov312]

спасибо! нашёл в этом тут, что искал.

[@user-jf5ly9mg7h]

Спасибо за видео, все легко и понятно

[@user-qh9yz2ro7r]

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

[@d_r_robot]

Наконец-то урок!

[@user-qs4xz1ub9i]

спасибо за урок!

[@ais1273]

Все гениальное - просто.🥰 приятно слушать и наполнение то, что нужно!

[@user-qc2ol5ee2y]

Огромное спасибо, все очень доходчиво и просто.

[@q_loo6342]

Прекрасно объясняете

[@user-fy6kf8hq2v]

Лучшее что мне попадалось на глаза! Спасибо

[@taketano]

Очень доступно, спасибо

[@luxarmiger5729]

Спасибо, Юрий! Как всегда понятно, исчерпывающе. У вас лучшие уроки1

[@bohdanmarchenko]

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

[@igorkl5167]

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

[@albertrockalfredo8250]

Крутецкий ролик! респект!

[@MariZlnva]

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

[@user-dq3ip9zz1r]

Каждый урок здесь - на вес золота

[@progerlife6690]

огонь!!!Спасибо как раз учу Гриды!

[@asg5511]

Супер видео!!! Очень полезная инфа!

[@vuviy1711]

очень хороший урок, спасибо

[@shishik123]

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

[@ZoooLoooS25]

Спасибо огромное за такой понятный урок по гридам!!! Очень бы хотелось увидеть такой же гид по флексу!!

[@gritsienkooleg3447]

Вот это круто! Спасибо вам за шикарно преподнесенную информацию! Так интересно, понятно и легко! Пошёл гридить)

[@user-sj8mw6wp3v]

Отлично рассказывает, смотрел несколько объяснений - это топчик!

[@_pheax]

спасибо вам!

[@user-ti5ps6hd4o]

Очень крутое видео! Спасибо! Стало понятнее!

[@Anatoli-bq1pe]

Благодарю! Это лучшее, что я смотрел про Grid. Все четко и по делу

[@RomanKhassazhirov]

Спасибо, за то что ты делаешь, всё просто и без воды! :)

[@1ifehappens]

Хорошая подача!

[@user-td2im1mi2s]

круто. Спасибо, я понял всё с одного раза.

[@dimitriitkach7697]

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

[@alanpuch2243]

Юрий, благодарю за ясное и чёткое объяснение материала

[@ynwa2290]

очень полезное видео. Большое спасибо

[@yanbelov8319]

Вы лучший!!! Спасибо большое. Нигде не мог найти досконального объяснения с примерами. Все по фактам и все что нужно. без воды !!! Огромное вам Спасибо.

[@Yaxomor]

Отличная подача информации.

[@yurye.4945]

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

[@natural_bornboogie]

Чувак, ты лучший!

[@user-vq7xe7fq2n]

+ Отличный видео пособие!

[@katetretyakova4901]

не смотрела про гриды ничего лучше! просто огромное спасибо за такое подробное и очень понятное объяснение!

[@user-xn1du5sv5e]

Прекрасный урок. Доходчивое объяснение без какой-либо воды. Самое лучшее видео по Grid. Спасибо, автор.

[@user-it7oh7hb9i]

Огромное спасибо, все по полочкам, понятно даже для начинающего, без каких-то знаний.

[@maxsam5741]

очень доступное объяснение с качественными примерами! спасибо вам за ваш труд

[@itbloom9322]

Благодарю!

[@user-ln9rb6el8g]

Супер! Вот бы такую же инструкцию для Flex-ов

[@user-uz6og6ks1x]

Определенно один из лучших каналов по веб-разработке! Всегда очень понятная и актуальная информация 👍

[@dedlive51]

Спасибо, у Вас хорошо получается объяснять.

[@easy-Code]

Автору огромное СПАСИБО!!! Лучшее видео про Grid! Всё просто и понятно объяснено.

[@voltrage1933]

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

[@khushbuStudioAkbarpur]

well understood. Thank you you are the best teacher.

[@user-lh6mi1cb5m]

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

[@user-vd8pr2gf1y]

Благодарю за такую доступную информацию по Grid, никак не могла понять что это такое, с Вами поняла. Успехов и процветания, побольше полезных уроков ждём

[@nik_zdorov]

Супер!

[@user-vc9bv9fj3f]

доходчиво, спасибо

[@snailans]

Ващще супер🔥, огромное вам спасибо, никакой воды, то что нужно, ещё раз благодарю, процветания вам !

[@NikolayBarkalov]

Спасибо!!!

[@warcraft.mp4889]

И правда ооочень годно, спасибо вам😊

[@javatravelrus]

Первый раз оставляю комментарий, реально ОЧЕНЬ хорошо объяснили, единственное видео, где все подробно показано. Спасибо огромное))

[@alisherberdiev9221]

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

[@cameron2505]

ich bin begeistert! Es ist so deutig! Und genau das, was ich gebraucht habe!

[@hoffmann646]

Несколько раз пересмотрел, чтобы все на практике усвоить) Мало кто дает настолько большое количество практики)

[@user-ct1lk7jq6o]

единственный кто смог рассказать ПОНЯТНО! спасибо за грамотное объяснение!

[@user-od4wh2jw8k]

Юрий, Вы очень хорошо и доступным языком все объясняете, за что Вам большое спасибо! С меня лайк👍👍👍

[@user-pe7dz5xg7v]

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

[@user-cb5et3vu7q]

Спасибо брат

[@pavelb5410]

Охиренный урок, 👍 наверное самый подробный. Спасибо большое тебе, за то что вложил душу, и помогаешь людям понять материал! Всем добра!

[@lettersanddigits]

это лучшее объяснение сеток, которое я встречал в русскоязычном ютубе

[@user-jb4zp2ll2d]

все круто с меня лайк!

[@ubtonai.online7988]

Просто бомба курс

[@uvencosuper3471]

Действительно, максимально доходчиво и понятно! Я до этого трое суток плевался от позиционирования в цсс, нервов истратил вагон. Матерился на тех, кто это придумал. Вроде настрою всё, что то добавляю - и всё расплылось снова. Грид - это в целом всё, что мне нужно от цсс. Полностью покрывает мои потребности. Спасибо!

[@lance8183]

Отличный урок

[@komronayubov2546]

Добрый день спасибо за видео очень ясно и по полочкам все! если будет возможность можете сделать полный курс по CSS Grid реальный и сложный сайт сверстать!