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

Рет қаралды 98,034

Күн бұрын

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

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

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

@oksyoksy6632 Жыл бұрын

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

@McBossRacerSever 3 жыл бұрын

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

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

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

@vilk4355 3 жыл бұрын

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

@viktor_kobozya Жыл бұрын

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

@vladimirbelonogov5993 Жыл бұрын

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

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

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

@radist126 Жыл бұрын

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

@uvencosuper3471 Жыл бұрын

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

@yanbelov8319 Жыл бұрын

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

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

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

@anasta_bags Жыл бұрын

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

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

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

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

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

@WebCademy 3 жыл бұрын

😀✌️

@sarxanhasanov2547 Жыл бұрын

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

@lettersanddigits 2 жыл бұрын

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

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

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

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

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

@asg5511 Жыл бұрын

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

@apelsin4ik2901 11 ай бұрын

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

@romanlavrentov312 2 жыл бұрын

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

@cameron2505 8 ай бұрын

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

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

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

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

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

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

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

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

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

@TheAlletar 3 жыл бұрын

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

@NoFear144 3 жыл бұрын

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

@annaandrukhanenko206 3 жыл бұрын

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

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

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

@hoffmann646 2 жыл бұрын

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

@taketano 3 жыл бұрын

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

@useruseroff6605 2 жыл бұрын

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

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

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

@rs_man 2 жыл бұрын

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

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

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

@WebCademy Жыл бұрын

Да, фракции.

@d_r_robot 3 жыл бұрын

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

@nik_zdorov 2 жыл бұрын

Супер!

@DmitriyTernov Жыл бұрын

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

@warcraft.mp4889 5 ай бұрын

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

@dmitryck8721 2 жыл бұрын

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

@danl5713 Жыл бұрын

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

@MrWEBNEO 2 жыл бұрын

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

@natural_bornboogie 2 жыл бұрын

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

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

Круто!!! 😍😍😍

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

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

@ridge_crm 2 жыл бұрын

потрясающе!

@daudsatiyadzhiev3505 2 жыл бұрын

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

@Liliia394 2 жыл бұрын

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

@artemalekseev6885 2 жыл бұрын

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

@shishik123 2 жыл бұрын

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

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

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

@giper_molot 2 жыл бұрын

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

@bohdanmarchenko Жыл бұрын

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

@ynwa2290 2 жыл бұрын

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

@vuviy1711 2 жыл бұрын

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

@alexgrinberg1888 2 жыл бұрын

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

@lance8183 Жыл бұрын

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

@luxarmiger5729 2 жыл бұрын

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

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

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

@_pheax 3 жыл бұрын

спасибо вам!

@progerlife6690 2 жыл бұрын

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

@q_loo6342 2 жыл бұрын

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

@ais1273 2 жыл бұрын

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

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

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

@1ifehappens Жыл бұрын

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

@dimamaik8923 2 жыл бұрын

Супер)

@voltrage1933 2 жыл бұрын

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

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

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

@Yaxomor 2 жыл бұрын

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

@MariZlnva Жыл бұрын

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

@gritsienkooleg3447 2 жыл бұрын

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

@albertrockalfredo8250 Жыл бұрын

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

@igorkl5167 Жыл бұрын

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

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

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

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

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

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

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

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

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

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

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

@RomanKhassazhirov Жыл бұрын

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

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

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

@ZoooLoooS25 Жыл бұрын

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

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

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

@katetretyakova4901 2 жыл бұрын

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

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

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

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

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