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

↓↓↓ Тайм-коды ↓↓↓

В этом уроке мы подробно изучим работу с сеткой CSS Grid. Все на простых и понятных примерах. Тайм коды в описании.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.

Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 12 Августа 2024 года.

💻 Курс "Разработка сайтов на PHP + MySQL":
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Тайм-коды
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

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 - Завершение

[eduardkhomiak]

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

[MrAnonymous]

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

[yurydaszukiewicz]

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

[XaHyMaH]

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

[vilk]

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

[oksyoksy]

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

[McBossRacerSever]

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

[bjoegtr]

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

[fdjjhji]

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

[vladimirbelonogov]

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

[uvencosuper]

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

[viktor_kobozya]

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

[lettersanddigits]

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

[yanbelov]

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

[ynqffvv]

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

[anasta_bags]

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

[uzogksx]

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

[eyeqchj]

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

[sarxanhasanov]

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

[radist]

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