Адаптивная верстка на CSS Grid для интернет магазина. Использование grid areas

Верстаем нестандартную сетку с товарами для интернет магазина на CSS Grid c использованием grid template ares. Применяем адаптив и responsive верстку. Медиазапросы и minmax при верстке на гридах. ↓↓↓ Тайм-коды в описании ↓↓↓

Уроки по CSS Grid на нашем канале:

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

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

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

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

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

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

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

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

00:00 Постановка задачи
01:16 Дизайн макет
02:36 Почему не стоит использовать flex-box
03:57 Создаем сетку на CSS grid
06:13 Работа с CSS Grid template area
06:13 Варианты позиционирования блоков внутри сетки
10:37 Дополнительные товары. Неявная сетка
12:12 Адаптив CSS Grid для планшетов
18:05 Адаптив CSS Grid для смартфонов

Корректировка адаптива и точек перелома
24:15 Добавление отзывчивости для планешта. mimax() для колонок
25:45 Добавление отзывчивости для десктопа. minmax()
28:10 Завершение

[inkorpzzz]

Отличный гайд/лайфхак, оказывается я не правильно использовал гриды, теперь стало понятно как их юзать)))

[raabdulk]

Юрий спасибо, как всегда все просто и доступно ! ✌

[ArhipParubets]

спасибо больше я теперь стал намного лучше понимать как применять Grid и делать адаптив

[KaldorOfficial]

Отличное объяснение обязательно буду использовать в вёрстке, так как очень удобно

[mrfir]

Наконец то теперь понятно как это делать спасибо за схему

[soko]

Только сейчас понял, насколько может быть полезным свойство grid. Раньше все время внедрял в верстку свойство flex, а теперь перейду на grid. Спасибо за это урок.

[dwaitshrut]

Самое доступное и понятное объяснение, спасибо большое!

[ВладимирК-жь]

Супер! Раньше верстал на флексах и я оценил, насколько проще все это можно сделать на гридах. Класс. Спасибо за урок!

[freak_moder]

Спасибо. Благодаря Вашим видео я наконец-то поняла что к чему.

[evgeniiak]

Отличный разбор, все четко и понятно. Спасибо большое! )

[ЕвгенийЛьвов-ов]

Классный, приятный, умный, красивый, просто молодец, спасибо за урок) тебя приятно слушать)

[trionixchannel]

Вааай🔥🔥🔥, мой дорогой огромное спасибо за ваши труды, это действительно самое понятное объяснение Вася!!!!

[rustamtau]

Не хватило конечно особенностей в настройках высоты/ширины, если у нас не дивы, а картинки. Для сравнения было бы очень круто.
Спасибо за разбор.

[alexandrgusletsov]

Спасибо . Grid template column, grid 😊

[odinnadcataya]

очень понравился урок, спасибо. Время пролетело незаметно!

[akhmad_goytinski]

Спасибо Юрий Ключевский! У Вас всё прекрасно получается, а где у Вас background-color? У Вас видны, а в стилях их нет и какие стили подключили не видно. Вообще то это видео про Адаптивная верстка на CSS Grid для интернет магазина. С уважением к Вам Ахмад Гапурович

[mrbegalieff]

Спасибо Вам огромное, за ваши уроки все четко и ясно

[ТимофейЛогинов-чи]

Спасибо за видео. Жаль макет не приложили.

[ЛеонидВасильев-ик]

А чем хуже подход со спанами у свойств grid-column и grid-rows? Будет короче код без template-areas...кажется)

[yuritolpygin]

Подскажите, пожалуйста, по какой причине могут не работать медиа запросы?