Адаптивная верстка на CSS Grid для интернет магазина. Использование grid areas
HTML-код
- Опубликовано: 13 июн 2024
- Верстаем нестандартную сетку с товарами для интернет магазина на CSS Grid c использованием grid template ares. Применяем адаптив и responsive верстку. Медиазапросы и minmax при верстке на гридах. ↓↓↓ Тайм-коды в описании ↓↓↓
Уроки по CSS Grid на нашем канале:
• Подробная инструкция по CSS Grid: • CSS Grid - самая понят...
• CSS Grid, flexbox, float в чем разница. Практический пример. • CSS Grid, flexbox, flo...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на 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 Постановка задачи
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 Завершение
Юрий спасибо, как всегда все просто и доступно ! ✌
Благодарю Юрий,вы гений .Супер урок👍
Отличное объяснение обязательно буду использовать в вёрстке, так как очень удобно
Спасибо Вам огромное, за ваши уроки все четко и ясно
очень понравился урок, спасибо. Время пролетело незаметно!
Очень хороший практический пример использования grid, спасибо! Пришел после ролика с инструкцией по гридам)
Отличный разбор, все четко и понятно. Спасибо большое! )
Спасибо. Благодаря Вашим видео я наконец-то поняла что к чему.
Самое доступное и понятное объяснение, спасибо большое!
Супер! Раньше верстал на флексах и я оценил, насколько проще все это можно сделать на гридах. Класс. Спасибо за урок!
Вааай🔥🔥🔥, мой дорогой огромное спасибо за ваши труды, это действительно самое понятное объяснение Вася!!!!
Классный, приятный, умный, красивый, просто молодец, спасибо за урок) тебя приятно слушать)
Наконец то теперь понятно как это делать спасибо за схему
Не хватило конечно особенностей в настройках высоты/ширины, если у нас не дивы, а картинки. Для сравнения было бы очень круто.
Спасибо за разбор.
Благодарю за классное видео
Спасибо! Крутотень!!!!!!пойду повторю)))
Только сейчас понял, насколько может быть полезным свойство grid. Раньше все время внедрял в верстку свойство flex, а теперь перейду на grid. Спасибо за это урок.
В каждом случае пригодится или flex или grid. Необязательно всё делать на гридах
@@WockeezChannel а где лучше применять flex а где grid?
@@rasputin188 там где можно применить флекс, применяй флекс, гриды в более сложных структурах
От ситуации, гриды как понял если много подобных рядов как в видео @@rasputin188
Спасибо . Grid template column , grid 😊
Спасибо Юрий Ключевский! У Вас всё прекрасно получается, а где у Вас background-color? У Вас видны, а в стилях их нет и какие стили подключили не видно. Вообще то это видео про Адаптивная верстка на CSS Grid для интернет магазина. С уважением к Вам Ахмад Гапурович
Огонь🔥
Спасибо за видео. Жаль макет не приложили.
А чем хуже подход со спанами у свойств grid-column и grid-rows? Будет короче код без template-areas...кажется)
почему на @media (max-width: 1129px) grid-template-rows: repeat(2, именно 180px а не 190px?) , ведь при значении grid-auto-rows:380px будет разница в 20px у блоков которые выступают за границу сетки
Подскажите, пожалуйста, по какой причине могут не работать медиа запросы?
Привет, почему grid auto rows стоит 380 - блоки тогда получаются почти в два раза больше чем нужно? ставлю 180 и все как по макету у вас, может я что то упустил?
Мы не учили гриды, только флексы, скажите плиз, для динамических данных, я так понимаю, работать будет также при условии, что мы не знаем какое количество карточек с продуктами и товарами будет приходить?
Работать будет также. В ролике показан вариант когда товаров может быть больше 4. Они просто добавятся рядами ниже.
@@WebCademy спасибо большое)
Я думал нам покажут адаптив без медиа-запросов, чисто на гридах. Такое возможно, желательно?
Каким образом выровнен текст внутри DIV??? (извините)
Помогите пожалуйста, почему grid-template-areas сразу же перечёркивается как я его ввожу ? Браузеры последней версии
Где-то допускаете ошибку, как именно подчеркивается, и где это происходит - редактор или веб-инспектор. Само свойство в веб-инспекторе работает или перечеркнуто?
А есть ссылка на макет figma
?
Я так понял что ширину для grid-template-columns нужно определить по самой минимальной ширине элементов, а grid-template-rows соответственно по самой минимальной высоте, все получилось, спасибо. Тут же возникла другая проблема, при определении grid-auto-rows у меня элементы выстраиваются по центру сетки а не по левому краю, хотя нигде не центровал в ручную.. подскажите пожалуйста как решить
также неявные элементы начинают выравниваться со второй колонки игнорируя первую..
@@manofsteppe179 Без кода трудно что-то сказать. Можно додумывать, но это не вариант. Раньше у нас были разборы верстки, но сейчас пока не проводятся.
@@WebCademy могу ли я показать по скриншотам? код и результат, не хочется бросать на пол пути..
@@manofsteppe179 загрузите на хостинг или гитхаб и давайте ссылку. Так будет удобнее всего.
@@manofsteppe179 загрузите на хостинг или гитхаб и давайте ссылку. Так будет удобнее всего.
почему при адаптиве 1129 у меня все блоки прижимаються к левому краю как сделать их по центру как у вас?
justify-content: center;
Подскажите а зачем по умолчанию прописываются такие параметры: ?
*, *::before, *::after
box-sizing: border-box;
Чтобы все размеры width и height учитывали рамку и padding
@@WebCademy ясно спасибо за пояснение
Я еще в школе , но решил идти на программиста, но вообще не знаю направления и тп и впринципе не знаю не чего о программирование, с чего начать изучать?
Как успехи?)
Есть прогресс ?
А как сделать чтобы карточки так прикольно прыгали при наведении?
Посмотри видеоуроки про анимацию, транзишн- это свойства CSS.
Переход с 4 колонок на 2, не логично, по краям остается много незанятого места. Я думаю, надо сделать переход 4-3-2-1.
Какую тему для Vs code Вы используете в данном видео?
Ayu - Mirage Bordered
Здравствуйте,может кто-то скинуть нулевые настройки?Для отступов,фонового цвета и центрирования,а то у меня выходит какая-то неразбериха
можно добавить для красивости:
.card-demo {
background-color: aquamarine;
border-radius: 15px;
min-height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
@@rustamtau7944 спасибо
@@rustamtau7944 почему списав все на 410px медия ничего не работает? А на 1130 сработало
Подобные сетки делать просто, а вот если туда добавить элементы, всё ломаеться в момент, grid и так сложный а там вообще не поймёшь что делать, проще margin всё выставить, новички понимают сразу
не согласен, гриды уже давно адаптированы
@@MelkoR4111 Если Grid был идеален негатива у людей не было,а так ну ерунда полная
А если товаров будет тысячи, как в таком случае добиться данного результата, ведь не будем мы каждому задавать класс и писать в grid-template-areas
Здравствуйте!) В видео было показано как добавлять дополнительные товары. Они займут область неявной сетки, для этого мы прописали grid-auto-rows; И пусть будет хоть 2000 товаров, они аккуратно разместятся внизу.
А если вся сетка должна быть такой нестандартной, и скажем на 20-40 товаров + реклама, тогда лучше использовать JS плагины типа masonry grid.
@@WebCademy А что если нужно, чтобы вся сетка была такая, можно использовать nth child?
@@WockeezChannel Если надо сделать ее бесконечной, то да, использовать формулу вроде nth-child(2n+1).
В реальных проектах с динамическим контентом это оказывается неудобно, теоретик никогда не поймет, почему ВБ например использует в сетке товаров флексы, причем с костылями, хотя там напрашивается как бы грид. Но если бы он задумался о том, как это будет работать в реальности, все стало бы понятно. Поэтому не нужно заявлять о правильности или неправильности чего-то, хорошо что на сегодняшний день это все больше считается глупостью
Причем тут "теоретик" когда показан конкретный пример конкретной задачи на практике. И выводы - на гридах меньше кода. А как это будет на проде - зависит и от остальных требований.
Ну и в дополнение - сетка товаров на ВБ она однотипная. К слову если посмотреть сетки товаров на популярных маркетплейсах, ВБ, Озон, Маркет, Amazon - то много интересного найти можно. Но там и понятно - цель максимальная поддержка в браузерах, поддерживаемость, расширяемость + легаси. Так что, зачастую в больших проектах результат - это компромисс.