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

Верстаем нестандартную сетку с товарами для интернет магазина на CSS Grid c использованием grid template ares. Применяем адаптив и responsive верстку. Медиазапросы и minmax при верстке на гридах. ↓↓↓ Тайм-коды в описании ↓↓↓ Уроки по CSS Grid на нашем канале: • Подробная инструкция по CSS Grid: • CSS Grid, flexbox, float в чем разница. Практический пример. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс “Создай свой первый сайт на HTML5 и CSS3“ От установки редактора, до публикации в сети. 👉 Получить уроки, конспекты, макет и код из уроков: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс по созданию и верстке сайтов: Обучение с наставником, 3 месяца, результат, гарантия. Научим создавать веб-сайты и зарабатывать на этом. 💻 Курс “Frontend разработчик. JavaScript React“: Обучение с наставником, 3 месяца, результат, гарантия. 💻 Курс “Разработка сайтов на PHP MySQL“: Создание сайтов с системой управления. Присоединиться к курсу можно прямо сейчас. 🏁 Обучение с нуля 💁‍♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе 💳 возможна рассрочка 💳 если курс не понравится, вернём деньги в первую неделю :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💈 Сайт школы ВебКадеми: 💈 Вступайте в группу Вконтакте: 💈 Подписывайтесь на Telegram: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Тайм-коды :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 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 Завершение #HTML #CSS #верстка #WebCademy #ВебКадеми #html5 #css3 #вёрстка #верстальщик #адаптив #grid #areas