CSS Grid с нуля №4. Адаптивный грид без медиа-запросов

preview_player
Показать описание
Привет! В этом видео начинаем рубрику гридов, которая продлится 4-5 роликов. Начнем с нуля последовательно изучать гриды, а в конце плейлиста сверстаем чтоб-нибудь на них для примера. Приятного просмотра)

Меня зовут Максим Васянович. Фрилансер уже 6 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.

#обучение #css #cssgrid
Рекомендации по теме
Комментарии
Автор

было бы здорово если бы еще рассказал про grid-template-areas, тоже полезное свойство когда на разных разрешениях блоки могут меняться местами

svetv
Автор

Забавно, буквально на днях сам впервые воспользовался этими свойствами гридов, а теперь появилось видео в рекомендациях)

R.wsteady
Автор

Я человек простой, увидела годный контент - подписалась.

evgeniasmirnova
Автор

Я человек простой, увидел оповещение - ставлю лайк.

MelkoR
Автор

Доброго дня! Хочется поинтересоваться у специалиста с опытом. Вёрстку я изучаю уже не первый год и сейчас оттачиваю свои навыки переодической практикой. Год назад пользовалась услугами ментора и он меня научил вставлять картинки через тег <picture>. Суть вопроса такова что, стоит ли продолжать так делать? Или вернуться к формату используя просто <img>? Данный вопрос мучает меня. Так как просматривая коды многих сайтов я наблюдаю что все из тех которыми я интересовалась картинки оформлены обычным <img>.

Надежда-мхх
Автор

День добрый! Очень нравиться ваш канал. Использую вашу сборку. Вот только понадобилось работать с ней в Ubuntu и так и не смог запустить. Сделайте пожалуйста видос как использовать вашу сборку на Ubuntu с поэтапным решением начиная с правильной установки Node & NVM

АлексейДолгов-цф
Автор

жаль что гридами все равно нельзя заменить аналог flex-wrap:wrap, к примеру если есть список тегов разной ширины и нужно переносить на другую строку не поместившиеся, все равно приходится использовать flex и margin чтоб был между ними какой то отступ, а обертке отрицательный margin по старинке, хотя нужен всего лишь гэп у флекса в таком случае но его использовать нельзя из за кривого сафари не таких старых версий

ПавелЗуев-ух
Автор

Добрый день. Спасибо за видео! Подскажите, а как быть при использовании auto fit с gap'ом?
Если он на разных разрешениях экранов разный. Например, на десктопе 40px между карточками, а на телефоне 10px. Всё равно ведь медиа-запросы надо для gap'ов прописывать? Или нет?

nataliealeksandrova