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

Верстаем нестандартную сетку с товарами для интернет магазина на CSS Grid c использованием grid template ares. Применяем адаптив и responsive верстку. Медиазапросы и minmax при верстке на гридах. VVV Тайм-коды в описании VVV Уроки по CSS Grid на нашем канале: • Подробная инструкция по CSS Grid: • CSS Grid - самая понятная инструкция ... • CSS Grid, flexbox, float в чем разница. Практический пример. • CSS Grid, flexbox, float. В чем разни... :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3" От установки редактора, до публикации в сети. Получить уроки, конспекты, макет и код из уроков:
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Курс по созданию и верстке сайтов:
Обучение с наставником, 3 месяца, результат, гарантия. Научим создавать веб-сайты и зарабатывать на этом. Старт обучения: 16 Декабря 2024 года. Курс "Frontend разработчик. JavaScript + React":
Обучение с наставником, 3 месяца, результат, гарантия. Старт обучения: 23 Декабря 2024 года. Курс "Разработка сайтов на PHP + MySQL":
Создание сайтов с системой управления. Присоединиться к курсу можно прямо сейчас. Обучение с нуля Обучение с наставником Доведение с нуля до результата Помощь с трудоустройством Поможем взять первый заказ на фрилансе возможна рассрочка если курс не понравится, вернём деньги в первую неделю :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Сайт школы ВебКадеми:
Вступайте в группу Вконтакте: https://vk.com/webcademy
Подписывайтесь на 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 Завершение