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

Рет қаралды 97,757

Күн бұрын

↓↓↓ Тайм-коды ↓↓↓
В этом уроке мы подробно изучим работу с сеткой CSS Grid. Все на простых и понятных примерах. Тайм коды в описании.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: 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 - Завершение

Пікірлер: 208

@eduardkhomiak9747 2 жыл бұрын

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

@gritsienkooleg3447 2 жыл бұрын

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

@pascalsparadox9211 Жыл бұрын

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

@user-ey1eq4ch4j Жыл бұрын

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

@irinadim Жыл бұрын

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

@asgard7815 2 ай бұрын

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

@XaHyMaH 4 ай бұрын

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

@1MrAnonymous11 3 жыл бұрын

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

@yurydaszukiewicz1033 2 жыл бұрын

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

@oksyoksy6632 Жыл бұрын

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

@vilk4355 3 жыл бұрын

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

@McBossRacerSever 3 жыл бұрын

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

@user-fd8jj3hj4i Жыл бұрын

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

@viktor_kobozya Жыл бұрын

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

@vladimirbelonogov5993 Жыл бұрын

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

@user-bj8oe1gt3r 6 ай бұрын

самый полный и понятный урок на ютубе по гридам

@user-yn3qf8fv6v 3 жыл бұрын

Наконец-то доходчиво объяснили разницу между auto-fill и auto-fit.

@WebCademy 3 жыл бұрын

😀✌️

@uvencosuper3471 Жыл бұрын

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

@anasta_bags Жыл бұрын

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

@sarxanhasanov2547 Жыл бұрын

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

@radist126 Жыл бұрын

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

@Anatoli-bq1pe Жыл бұрын

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

@yanbelov8319 Жыл бұрын

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

@TheAlletar 3 жыл бұрын

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

@NoFear144 3 жыл бұрын

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

@user-uz6og6ks1x 5 ай бұрын

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

@useruseroff6605 2 жыл бұрын

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

@rs_man 2 жыл бұрын

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

@user-oc5dv3op5m 2 жыл бұрын

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

@MrWEBNEO 2 жыл бұрын

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

@user-dq3ip9zz1r 3 жыл бұрын

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

@mishachubenko3394 Жыл бұрын

Дякую тобі , що ти зробив це відео для нас, воно дуже користне і твоя подача робить його дуже фаховим. Я зараз вчу грід, і твоя робота мені дуже помогає !!!

@daudsatiyadzhiev3505 2 жыл бұрын

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

@alexgrinberg1888 2 жыл бұрын

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

@luxarmiger5729 2 жыл бұрын

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

@artemalekseev6885 2 жыл бұрын

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

@Liliia394 2 жыл бұрын

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

@user-jf5ly9mg7h 2 жыл бұрын

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

@gritsienkooleg3447 2 жыл бұрын

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

@ais1273 2 жыл бұрын

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

@user-ey1eq4ch4j Жыл бұрын

Действительно, очень понятно изложено. Таких Учителей (с большой буквы) по пальцам одной руки можно пересчитать. Кроме Юрия, автора этого видео, могу отметить ещё Вадима Макеева и Жеку Андриканича. Тоже прекрасные гуру. Юрий, Вадим и Евгений - самые лучшие учители, которые мне встречались на просторах рунета. Лайк, однозначно и в рекомендации начинающим. Прекрасный учебный материал.

@user-qc2ol5ee2y Жыл бұрын

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

@dmitryck8721 2 жыл бұрын

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

@voltrage1933 2 жыл бұрын

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

@apelsin4ik2901 11 ай бұрын

Спасибо за урок! Неужели я освоил Grid-ы) Много видео пересмотрел, но такой ролик из тысячи по grid-ам мне не встречался. Всё ясно, понятно, структурировано, а главное разжевано. Поймёт даже маленький ребёнок. Ещё раз спасибо, удачи в последующих роликах. Автор молодец 👍🔥🔥🔥

@user-sj8mw6wp3v 2 жыл бұрын

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

@igorkl5167 Жыл бұрын

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

@ridge_crm 2 жыл бұрын

потрясающе!

@ZoooLoooS25 Жыл бұрын

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

@user-fy6kf8hq2v Жыл бұрын

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

@RomanKhassazhirov Жыл бұрын

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

@DmitriyTernov Жыл бұрын

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

@asg5511 Жыл бұрын

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

@user-it7oh7hb9i 2 жыл бұрын

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

@user-vd8pr2gf1y 2 жыл бұрын

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

@annaandrukhanenko206 3 жыл бұрын

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

@MariZlnva Жыл бұрын

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

@danl5713 Жыл бұрын

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

@katetretyakova4901 2 жыл бұрын

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

@-Forever-Young- 2 жыл бұрын

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

@snailans Жыл бұрын

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

@dedlive51 2 жыл бұрын

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

@maxsam5741 Жыл бұрын

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

@alanpuch2243 9 ай бұрын

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

@lettersanddigits 2 жыл бұрын

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

@user-xn1du5sv5e 2 жыл бұрын

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

@javatravelrus 2 жыл бұрын

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

@romanlavrentov312 2 жыл бұрын

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

@alisherberdiev9221 Жыл бұрын

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

@dimitriitkach7697 2 жыл бұрын

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

@user-hk5hn9dh4q Жыл бұрын

Суперское объяснение темы! Лучшее из всего, что я смотрел! Вот только fr - это не frame, а fractional unit. Это не занудная душка, а просто чтобы люди запоминали правильные термины, чтобы лучше друг друга понимать)

@WebCademy Жыл бұрын

Да, фракции.

@giper_molot 2 жыл бұрын

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

@easy-Code Жыл бұрын

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

@albertrockalfredo8250 Жыл бұрын

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

@user-pt1te3uh7f 4 ай бұрын

Круто и просто объяснил, респект Автору,просто шикарно

@vuviy1711 2 жыл бұрын

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

@user-ti5ps6hd4o 10 ай бұрын

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

@hoffmann646 2 жыл бұрын

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

@user-td2im1mi2s Жыл бұрын

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

@user-od4wh2jw8k Жыл бұрын

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

@user-gk4ye4zh5x 11 ай бұрын

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

@shishik123 2 жыл бұрын

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

@taketano 3 жыл бұрын

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

@ynwa2290 2 жыл бұрын

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

@user-qh9yz2ro7r 2 жыл бұрын

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

@q_loo6342 2 жыл бұрын

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

@user-qs4xz1ub9i 3 жыл бұрын

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

@progerlife6690 2 жыл бұрын

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

@bohdanmarchenko Жыл бұрын

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

@d_r_robot 3 жыл бұрын

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

@komronayubov2546 3 жыл бұрын

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

@user-ln9rb6el8g 2 жыл бұрын

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

@Yaxomor 2 жыл бұрын

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

@user-vq7xe7fq2n 2 жыл бұрын

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

@natural_bornboogie 2 жыл бұрын

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

@nik_zdorov 2 жыл бұрын

Супер!

@user-vm4jd3wl7o Жыл бұрын

Досмотрел почти до конца и подумал, что обязательно нужно поставить "лайк". Потянулся мышкой и глазами к "Пальцу-вверх". Стоп! Я же уже "лайкнул". Субъективно: объяснение такого уровня "разжевывания", да еще и с показом заслуживает 2 "лайка" - как минимум!

@yurye.4945 2 жыл бұрын

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

@cameron2505 8 ай бұрын

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

@khushbuStudioAkbarpur Жыл бұрын

well understood. Thank you you are the best teacher.

@_pheax 3 жыл бұрын

спасибо вам!

@user-sf2lb3qe8k 7 ай бұрын

Хороший туториал. Достаточно фундамнентально.

@user-fo6kh9ff2k Жыл бұрын

Спасибо большое, только у вас понял, что это за чудо такое - этот grid)

@Number-iu5wr 3 жыл бұрын

Круто!!! 😍😍😍

@alexasanchobetherestors9962 Жыл бұрын

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