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