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

Подписаться 30 тыс.

Просмотров 11 тыс.

50% 1

Привет! В этом видео начинаем рубрику гридов, которая продлится 4-5 роликов. Начнем с нуля последовательно изучать гриды, а в конце плейлиста сверстаем чтоб-нибудь на них для примера. Приятного просмотра)
Хорошая статья на тему: doka.guide/css/grid/
Меня зовут Максим Васянович. Фрилансер уже 6 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Поддержать канал: boosty.to/maxgraph
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Карта канала: blog.maxgraph.ru/ytmap/
Яндекс.Дзен: zen.yandex.ru/id/5cb99cd674b7...
Мой сайт: maxgraph.ru
Канал в телеграм: t.me/maxgraph
Чат для верстальщиков: t.me/maxgraph_chat
#обучение #css #cssgrid

Опубликовано:

18 июл 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 31

@svet0v Год назад

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

@TamaraNikolaevna 9 месяцев назад

Максим, спасибо за работу.

@qvadratkz 22 дня назад

Спасибо огромное

@romanpit4you975 6 месяцев назад

Спасибо за видео!

@evgenika7472 Год назад

Спасибо большое!!! Оочень полезно!!

@maxgraph Год назад

Здорово)

@O_Hat 2 месяца назад

спасибо, напомнил

@AlekseyNaumov_734 Год назад

Ок. Спасибо.

@R.wsteady Год назад

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

@maxgraph Год назад

Ну здорово))

@nataliealeksandrova8047 Год назад

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

@maxgraph Год назад

Здравствуйте, в таком случае да, нужен медиа

@R.wsteady Год назад

Адаптивный размер попробуйте, есть формула у Фрилансера по жизни

@user-bh7wi7ds4v Год назад

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

@maxgraph Год назад

Увы, не сделаю, так как сам не пользуюсь этой системой

@user-qf8qs5ss7p Год назад

👍🏻

@MelkoR4111 Год назад

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

@maxgraph Год назад

Отлично))

@user-jf2kr4xo9i Год назад

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

@danilka6295 Год назад

Тэг picture используется в случае, если есть несколько расширений изображения, сайту будет проще загрузить тот, что весит меньше, либо если какое-то расширение не поддерживается браузером, загрузится то, что поддерживается:D . Как раз у Максима в gulp сборке используется такой способ.

@maxgraph Год назад

Здравствуйте. Вот как раз nnhr ответил))

@user-jf2kr4xo9i Год назад

@@danilka6295 Благодарю за ответ!

@replixshop6903 Год назад

Ну тут ещё стоит учитывать натяжку на CMS. Если я не ошибаюсь конечно. То есть предположим у вас есть карточка товара и в ней изображение и в таком случае лучше использовать тэг img

@evgeniasmirnova6939 Год назад

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

@maxgraph Год назад

Спасибо)

@user-hk1go5rl9f Год назад

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

@evgeniyprowork Год назад

я сам недавно переделывал несколько блоков с этим gap, поставил паддинги и минусовой маргин, на относительно новых устройствах андроид/айос у всех все ок, а у клиента видимо древний телефон и у него шляпа была, причем он это заметил спустя пол года наверное