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