Посмотрим на то, как сделать адаптивные карточки с помощью CSS grid repeat minmax без использования медиа выражений. Курс по HTML и CSS: purpleschool.ru/ #css #css3 #shorts
a почему не display: flex; flex-basis:300px; flex-wrap:wrap; будут и адаптивно себя вести, и перескакивать, и проблем с карточками не будет. можно ещё flex-grow добавить для растягивания по всей площади, но тогда будет карточка чуть растянута в какие-то моменты.
Разве так не будет дырки если ширина будет 900-1199?) справа же наверное дырка останется так как 300рх карточки будут. Да и грид как-то логичнее для контента который по xy расположен
напоминает тот самый видос с банкой, только в этом случае она не лопнула и фичу скорее бегут записывать в шортс под предлогом "могут спросить на собесе".
@@PurpleSchool А как делать тоже самое на Flex`ах? Уверен что можно делать. Собственно, тут сетка в гридах нужна только чтобы делать все блоки одинаковой ширины и только. А значит Флексы должна справится. По идее надо задать Flex: 0 300px auto. или чтото в этом роде.
@@nojik-ejik По Вашему оси у грида красивей оси флекса?, Грид не может быть красивей. Просто функциональности больше. Но У грида очень глубоая функциональность. А автор описывает простое поведение Грида, что есть ощущение, что простое поведение грида будет приравниваться сложной настройке флекса.
привет. делал тут обёртку на console.log. неприятная тема с ссылкой в devtools'e на файл:строка, она ведет к файлу с обёрткой. решение любопытно: надо просто добавить скрипт в blackbox в самих тулзах, что делает то, что нужно. кажется, неплохая тема для короткого видео
@@PurpleSchool flex-grow:1; для карточек. Но когда в последней строке "таблички" карточек будет меньше, чем в остальных строках, то их размер не будет совпадать с размером остальных, он будет увеличенный.
Врапперу задайте flex-wrap: wrap(+ роскошный gap: 1rem), а всем вложенным дивам flex: 1 1 auto (мои значения обычно варьируются от 15 до 33%) и будем вам магия) а не эта шляпа гридовская
@@PurpleSchooljs - это супер сложный язык. Кто бы что не говорил. У него нет строгой типизации и можно уже с этого начинать (я сейчас говорю именно про JS). Значит мы в любом месте можем неожиданно нарваться на какой-нибудь undefined, null, несоответствие типов и ТД. Новичку придется выучить помимо синтаксиса всякие промисы, методы массивов, коллбэки, event loop со своими микро и макротасками, чтобы понимать из за чего коллбэк отрабатывает позже. А потом ещё после всего этого тебе говорят: "Слушай, сейчас на чистом JS нигде не пишут, уже TS требуется", и ты начинаешь надевать трусы, когда уже надел штаны и учишься типизировать все это дело. Где же тут просто то?
@@Sergey_Klimov js простой за счёт своей динамической типизации и не сложного синтаксиса. Выучил и пиши. Да, потом нужно будет осознать, что типизация нужна и перейти к TS, но начать писать можно и без. Что касается Promise и Event Loop, так же нужно будет изучать как все работает под капотом и с асинхронными задачами в других языка. Скажем в go, как работает gorutine и channel разобраться будет сложнее чем с async await.
@@PurpleSchoolну как если сделать flex-wrap:wrap , и justify-content:space-between ,а детям задать ширину 300px будет то же самое Через гриды код читается гораздо тяжелее чем флексом как по мне
Вот прикольный мужик. Но тока его вот эти плямкания причмокивания и дыхание :D ну бесит :DD Ну ты извини если че не так. Просто постоянно смотрю не могу молчат.
