CSS Grid: адаптивная верстка реального макета (CSS Grid Real Example)

1041 ratings | 28174 views


CSS Grid: адаптивная верстка реального макета (CSS Grid Real Example)

Курс «OpenCart: Создание интернет-магазина от А до Я»: Результат, референсы и исходники урока: Всем привет, дорогие друзья! Сегодня мы на реальном примере сверстаем крутой адаптивный макет, используя технологию CSS Grid. В данном уроке мы не будем использовать никаких фреймворков для адаптивной верстки и в полной мере насладимся чистым CSS и новыми возможностями CSS Grid. В конце видео мы протестируем верстку на реальном мобильном устройстве :-) Как создать интернет-магазин: Как стать фрилансером: Как создать сайт-портфолио на WordPress: Группа Вконтакте: Реклама на канале:

Comments to the video: CSS Grid: адаптивная верстка реального макета (CSS Grid Real Example)

Velkyn 2 days ago
Очень принципиальный проблема. Когда работаю в файле sass, потом того будто написал &::before надавил enter, у меня перебежало на последующую строчку без таба. Так же и потом хоть какого селектора.grid к примеру, перебегает в новою строчку без табуляции. Но это не верно и трудиться не будет. Приходится повсевременно вручную табуляцию устанавливать для правильного синтаксиса. Хотя в HTML файле при нажатии enter табы ставятся автоматом. Что мне мастерить помогите. Уже и sassBeautify ставил ничего не помогает.
Yura Sachenko 3 days ago
- Распаковываем наш Emmet-заготовку. Сохраняем и у нас лицезреем, вышла вот такая вот - ложь xD Очень круто и здорово, благодарю Алексей! Как же очень подфартило очнутся в 2к17 и узнать идеальную на этот момент технологию в верстке, в особенности когда она уже поддерживается браузерами. Мм. Белиссимо)
Гвин Глейд 3 days ago
Cool Bull Shit xD
Yarik Dmitrik 18 days ago
Омгг, чувак, ты роскошен!!!)))
Andrey Lc 20 days ago
лойс, благодарю за труды
Orbita_Studios 20 days ago
Можешь по подробнее поведать про position а то не использую этак этак понятие не имею для чего
Orbita_Studios 20 days ago
39:52 будто ты этак сделал что скопировал огромное количество слов подскажи
Никита Трофимов 21 days ago
Один момент по наименованию переменных в sass. а если, к примеру, заказчик решит поменять сероватый краска, на карий. Придется тогда поменять название переменной либо она будет неинформативной. лучше не именовать переменные цветовыми наименованиями
Иван Бабюк 25 days ago
Лайк совершенно точно! Одного не усвою, под клавишами делаешь бардюрчик чрез after, отчего бы это не сделать чрез border-bottom?
Сергей Вольфович 27 days ago
Алексей, чему Вы на данный момент больше итого отдаете предпочтение по сетке в собственных новых проектах ? Bootstrap либо CSS Grid ? И кушать ли резон её использовать уже на данный момент если даже некие версии браузеров её не поддерживают, к примеру IOS Safari 9.0 - 10.2. По последней мере этак гласит Сan i use.
Сергей Вольфович 27 days ago
Благодарю.
WebDesign Master 27 days ago
Конечно Bootstrap :) Это же для ознакомления видео. В конце 2018 года быстрее итого можно будет использовать.
DISS kg 29 days ago
что это за прибор с какой ты сделал дизайн этого веб-сайта?
stalbek Tashmatov 6 days ago
adobe xd
Инжеватов Станислав 1 month ago
А как разработка grid поддерживается браузерами ? Стоит заколачивать на флексбоксы и обтекания флоутами либо еще спозаранку?
Andriy Samosval 1 month ago
Спонсор моего досуга! Спасибо!
Just want TF2 hats 1 month ago
Cool bull shit )
Сергей Минин 1 month ago
не сообразил, где материалы?
WebDesign Master 1 month ago
На страничке урока, ссылка в описании.
Павел Переведенцев 1 month ago
Доброго времени суток. Помогите разобраться с неувязкой gulp-notify: [Error running Gulp] app\sass\_media.sass Error: Invalid CSS after .width : 1200px) : expected , was ; on line 6 of app/sass/_media.sass >> @media only screen and (max-width : 1200px); /**/ стоят потом каждого запроса.
justGOD 1 month ago
Народ, может кто знает. Делаю guld build, и рисунки из гридов пропадают. А этак, когда запускаю попросту чрез gulp проек, всё работает будто нужно.
Лера Прокопенко 1 month ago
что это за иллюстратор?
WebDesign Master 1 month ago
Adobe XD.
Artem Shulga 1 month ago
Можно ли уже верстать по таковой технологии. И если я буду делать задания на фрилансе гридами, заместо бутстрапа будет ли это нормально? Или цсс грид имеет трудности с кроссбраузерностью?
WebDesign Master 1 month ago
Можно. С условием, что ваша верстка не попадёт на продакшен. Конечно имеет, разработка свежайшая. Посмотрите сопоставимость.
alternativeforest1 1 month ago
какой редактор под виндовс сумеет этак же быстро подменять a.button на html сходу?
WebDesign Master 1 month ago
Любой с поддержкой Emmet. Погуглите.
Тимур Юнусов 1 month ago
Добрый денек, желаю произнести благодарю за Вашу работу, совершенно точно наилучший канал на ютуб в собственном роде! Давно желал справиться, не планируете ли Вы записать видео по Angular/React/Vue? Мне будто, многим было бы любопытно, т.к. инфы на российском во-первых весьма не достаточно, а во-вторых она или устаревшая, или не совершенно верная. На британском тоже лишь документация и официальный туториал простого интернет-приложения на их же веб-сайте. Или Вы не используете js фреймворки в собственной работе? Спасибо!
WebDesign Master 1 month ago
Добрый денек. Спасибо. Когда освободится груда свободного времени - запишу ))
Александр Парфинович 1 month ago
Помогите плиз, гляньте скрин, неувязка с адаптивкой (1:46:32). Голову ломаю уже несколько часов. Я попросту в шоке, будто как будто не изменяется grid-template-columns. И grid-column для nth-child тоже не изменяется при изменении размера экрана. Initial не работает, короче кошмар. Ссылка на скрин Ссылка на код
Николай Иванов 1 month ago
ну-ка будто не сообразил?)))) у тебя parent (.portfolio-item) и child(&:nth-child()) стояли товарищ под другом. а в sass синтаксисе надлежит сдвигаться, что показывает, что одинешенек принадлежит другому.
Александр Парфинович 1 month ago
Сделал с табами, всё заработало, загуглил синтаксис, пишут мастерить с табом, неувязка была с компиляцией непонятная. Сам не сообразил будто заработало.
Николай Иванов 1 month ago
Если внезапно еще не разобрался.Не знаю ,что там на 1:46:32, однако судя по скрину повиновение стоит неверное. Tабом подвинь вот этак .portfolio-item &:nth-child() &:nth-child() &:nth-child()
Дмитрий Л 1 month ago
7:29 что за плагины левее поиска в окне. Я этак понимаю открывает терминал в текущей папке и творение файла? Название изволь
Павел Бездорнов 1 month ago
Хотел справиться Вас, что Вы думаете о БЭМ? Использовали ли когда-нибудь, и будут ли уроки?
Raman Zhenalin 1 month ago
Отличный контент, благодарю. В сборках для медиа-запросов комфортно и понятнее использовать миксины для sass, к примеру эти --> Шаблон сотворения сетки на флексбоксах с помощью sass с мексинами для медиа-запросов, к примеру тут
Павел Бездорнов 1 month ago
Кстати, отчего на Мак перебежал, ты же вроде гласил, что для тебя винда больше нравится?
WebDesign Master 1 month ago
Работал в дороге, брал MacBook. Сейчас уже дома, последующие уроки - на винде.
Павел Бездорнов 1 month ago
Что за прога в какой Вы макет делали?
Let'sFun 1 month ago
Недавно натолкнулся на твой канал и это волшебство! Очень немало вынес нужных фишек. Назрел одинешенек проблема: сколько по времени ты предназначил интернет-разработке чтобы наработать таковой скил?
Елена Королева 1 month ago
По сопоставлению с видеоуроками на других каналах, мне весьма было любопытно!! Очень понятно растолковал все, благодарю) Хочется сейчас поглядеть другие твои видео!
Igor V 1 month ago
Хотелось бы svg для самых малеханьких ^_^
Елена Павлова 1 month ago
Большое благодарю за образец реальной верстки. Вопрос, какой появился: отчего бы не использовать для блока кнопок.buttoncase свойство grid-column: 1/-1; будто упоминалось в прошлом видео CSS Grid: Новый взор на адаптивную верстку веб-сайтов. Руководство? Тогда бы этот блок был вечно растянут на всю ширину сетки самостоятельно от количества колонок.
WebDesign Master 1 month ago
Да, это замечательное решение.
justGOD 1 month ago
Где твой миллион подписчиков ??? Вот на такое нужно расписываться однозначна. А не на всякий шлак. какой вас лишь деградирует.
Вадим Шорохов 1 month ago
весьма нередко при сохранении документов fonts.sass, vars.sass, base.sass, media.sass gulp выдает ошибку чтения файла: при этом, можно еще один сохранить тот же документ не внося конфигураций и промах не появляется, а приходится нажимать Ctrl+S один 10 попорядку, покамест заместо ошибки выдаст, что все нормально сохранилось. будто от этого освободиться?
Вадим Шорохов 1 month ago
отыскал такое решение, ошибки покамест закончили появляться: Решается попросту настройкой atomic save в sublime. По умолчанию в настройках стоит смысл atomic_save : false, меняешь на true и проблема решается один и навечно
WebDesign Master 1 month ago
Тогда трудно произнести. Я не встречался с таким.
Вадим Шорохов 1 month ago
саблайм на ssd-шном диске С
WebDesign Master 1 month ago
Поставьте ssd либо отключите опцию бережной работы с hdd (не помню точно заглавие, погуглите) в ST.
Вадим Шорохов 1 month ago
скажите, отчего при сохранении в саблайме, браузер не попросту обновляет содержимое, а перелистывает страничку приблизительно на середину предшествующего блока? любой один приходится скролить назад книзу, чтоб поглядеть на итог. на видео такового у создателя такового не наблюдаю.
Вадим Шорохов 1 month ago
в хроме все ок
WebDesign Master 1 month ago
В Firefox временами появляется такая неудача при работе с BrowserSync. Природа этого явления неясна. Попробуйте Chrome.
Вадим Шорохов 1 month ago
фаерфокс, заключительный
WebDesign Master 1 month ago
Какой браузер?
Вадим Шорохов 1 month ago
1:03:36 - создаем и оформляем форму 1:28:32 - делаем повышение рисунки при наведении 1:29:30 - оформляем секцию блога гридами 1:39:55 - начинаем адаптивить
Dastin Forest 1 month ago
круто бы по flexbox видео
Vilaribov 2 months ago
Спасибо Вам большущее за высококачественный и нужный контент!
Улугбек Исмаилов 2 months ago
Не могу осознать в чем вина я все сделал будто положена и все равно у меня такая промах ncu : Имя ncu не распознано будто имя командлета, функции, файла сценария либо выполняемой программки. Проверьте правильн ость написания имени, а также присутствие и корректность пути, потом чего повторите попытку. строчка:1 символ:1 + ncu + ~~~ + CategoryInfo : ObjectNotFound: (ncu:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException
Улугбек Исмаилов 2 months ago
Огромное благодарю все работает вроде будто ))) посодействовало ваше решение
Vladimir Ozerskiy 2 months ago
отчасти неувязка отважилась этак: в папке проекта поначалу нужно выполнить команду npm i -g npm-check-updates позже ncu (смайлика точно не будет, потому ncu -a) потом npm i Но поначалу пакеты установились будто то криво либо не стопроцентно, посодействовало удаление папки node modules и исполнение npm i от имени админа (у меня вин10) Вроде будто все начинает трудиться. Но создается еще файл package-lock.json, какой я не понимаю для чего. Это новенькая фича npm? Для чего он и на что оказывает влияние?
Vladimir Ozerskiy 2 months ago
таже промах и у меня, подскажите в чем может быть неувязка? если же в папке проекта выполнить не ncu, а команду npm i, то происходит последующее: npm notice created a lockfile as package-lock.json. You should commit  this file. npm WARN simple-gulp-start@1.0.0 No repository field.
Тёма Админ 2 months ago
Можно ли уже перебегать на такую верстку, либо покамест необходимо использовать бутстрап для кроссбраузерности?
Dastin Forest 2 months ago
Подскажите, что за программка для работы с макетом употребляется?
iqbeki 1 month ago
Adobe XD
Михаил Завалко 2 months ago
Лайк не смотря! 😀👍
Александр Волошин 2 months ago
Как именуется программка в которой вы нарезаете макеты?
Улугбек Исмаилов 2 months ago
Здравствуйте. Помогите изволь. У меня не работает ncu выводит ошибку. Nodejs установлен.
Андрей Комаров 2 months ago
Подскажите, что за прога для просмотра макета?
Андрей Комаров 2 months ago
Спасибо!
WebDesign Master 2 months ago
Adobe XD :-)
Денис Авилов 2 months ago
Стоит ли обращать внимание на ошибки в консоли ?
Денис Авилов 2 months ago
В данном примере в консоли имеется 23 ошибки , а на неких веб-сайтах доходит до 1000 ошибок и все работает отлично, выходит кушать критичные и не критичные ошибки, если может быть сделать видео задание по разбору ошибок и по работе в консоли ( хотя бы в 2-ух словах - для ознакомления - в общем) буду при-немало-признателен.
WebDesign Master 2 months ago
Конечно.
Дима Крысенко 2 months ago
Есть большая мольба, если не тяжело, заливать исходники не на Яндекс диск, а на Google Диск. Не у всех кушать доступ к сервисам Яндекса. Спасибо за осознание.
Kapitan Amerika 9 days ago
Я из Латвии. За Тор у нас спецслужбы берут сходу на карандаш. )) Так будто провайдеры сотрудничают с ними.
WebDesign Master 2 months ago
Но ведь кушать тор, какой обязан быть у каждого девелопера либо впн.
Иван Иванов 2 months ago
<p>Объясняешь тщательно!</p> <p>Надо все твои обучалки поглядеть. Сразу, огромное благодарю, от начинающего разработчика) </p> </like>
Денис Авилов 2 months ago
Спасибо огромное за видео задание !!!!!!
DANYLO ZHYKOL 2 months ago
Адаптивно!
Дмитрий Ананьев 2 months ago
что за программа просмотра макета?
WebDesign Master 2 months ago
Adobe XD.
Kaisar Kuanysh 2 months ago
будто сделать что бы, к примеру, header.main-header.grid заменялся автоматом на <header class= main-header grid ></header> ?
WebDesign Master 2 months ago
Установите плагин Emmet в ваш редактор. На канале кушать видео по Emmet, поглядите его.
dtdzung 2 months ago
Nice video. Like and sub your channel. Please visit to mine
Anatoliy Kirzo 2 months ago
этак что выходит воспользоваться можно?
WebDesign Master 2 months ago
Не на продакшене. Так, пощупать. Рановато выводить на реальные проекты.
Артур Крец 2 months ago
бомба
Alex Mongoose 2 months ago
Алексей, когда пишешь длинноватые конструкции с помощью emmet, комфортно использовать ctrl+alt+enter (на windows)
Дима Крысенко 2 months ago
Огромное благодарю за видео. Все будто вечно на высоте. Отдельное благодарю за вставку в конце с мобильным телефоном. Не знал что этак может быть чрез gulp.
Vlad Babenko 2 months ago
Лайк совершенно точно! А видео верстки реального макета с внедрением bootstrap 4 будет?
Роман Гу 2 months ago
благодарю, выделил для себя достойные внимания моменты в видео
Волибор Беляев 2 months ago
Очень признателен за это видео. Не знаю, освещался ли этот проблема в видео (покамест не досмотрел): я этак полагаю, Bootstrap уже не нужен?
Сергей Трубкин 1 month ago
Не усвою отчего гриды еще 2 года не будут использовать, они на данный момент поддерживаются во всех браузерах начиная с IE11(для IE с префиксами), если проект не подразумевает поддержку ниже IE11, то можно храбро использовать? Или я чего-то не знаю?)
Валерий Сидоренко 1 month ago
бутстрап уже кучу времени не нужен , с возникновением флексов , с бутстрапом приходится кучу итого перестиливать в особенности если контент динамический
Mitai 1 month ago
отчего не будут? Просто поначалу верстаете глупо сплошными блоками, а уже на подходящей ширине юзаете гриды Используете диррективу support Отдаете гриды современным браузерами , остальным флексы (с) Максим Усачев.
Волибор Беляев 2 months ago
Оу. Спасибо, а то я чуток было не поторопился забывать Bootstrap.
Роман Гу 2 months ago
А в чем просматривается макет веб-сайта?
WebDesign Master 2 months ago
Adobe XD.
Oleg Bespalko 2 months ago
Подскажите, изволь, что за тема саблайма :)
Oleg Bespalko 2 months ago
Огромное благодарю!)
WebDesign Master 2 months ago
One Dark Material Theme.
MkiP 2 months ago
Очень полезной контент.Хотелось бы справиться,а можно ли будто-то чтоб вы брали под управление? положим что-то сделать посодействовать вам,попросту практики будто таковой отыскать трудно,а чисто безвозмездно для опыта и вашей вероятной выгоде,если не может быть это,тогда может подскажете где и будто с этим биться,что мастерить?
SJlyDOG 2 months ago
В скором времени гриды порядком упростят нам верстку макетов, осталось малость обождать поддержку браузеров. И в сражение люд)
MkiP 2 months ago
SJlyDOG здесь ты прав,однако будто по мне здесь они очень уже ограниченные
SJlyDOG 2 months ago
Знаешь заказчики, которые требуют IE старенькых версий не пробиваемы)
MkiP 2 months ago
SJlyDOG этак они полностью поддерживается браузерами))
sdsa asdasd 2 months ago
лайк не смотря! ты наилучший!
Александр Чернов 2 months ago
Oh, great respect! design Idea of your simple LP is brilliant. p.s. also wish you, finally, to understand the meaning of correct English pronunciation, and start learning (it is never to late)))
Саша Лютаев 2 months ago
Однозначно лайк))) залей изволь исходники на google диск либо еще куда-то, с yandex'а не качает
RySiK 2x 2 months ago
круто!!! в натуре дизайн искусник)))
Mamix. 2 months ago
Новое правило в дизайне, лишь что выдумал
Anton Cherry 2 months ago
Как поставить лайк 2 раза? =))) Супер! Спасибо!
German Martirosyan 2 months ago
Может быть я что-то не учел, однако я выставил для 2-ух.blog-item:nth-child() смысл initial для grid-column и отпала нужда волочить их ниже по брейкпоинтам. ( P.S. За видео благодарю, были оч интереснейшие два часа. Увидел кое какие мелочи приятные в работе с сасс. Два часа пропархали неприметно)
WebDesign Master 2 months ago
Не увидел таковой способности. Спасибо.
Fanis Sagseev 2 months ago
Круто!
Vladimir Ishchenko 2 months ago
Не успел даже поглядеть, перст ввысь без всяких колебаний))
Young Developer 2 months ago
Спасибо, помню это я просил вас сбросить такое видео. Классно растолковал лишь если у вас будет пора сможете сбросить видосик с многостраничником хотя бы две странички
vitalik ochkurenko 2 months ago
а где можна скачать css grid?????????
Ольга Ветер 19 days ago
vitalik ochkurenko скачиваешь веб на флешку и там чрез розыск ищешь, делов то.
Val First 2 months ago
Зачетные видосики и веб-сайт. Заголовки в макете. )) с чувством юмора будто вечно распорядок. все пора менеджера Яйцеслава вспоминаю. )))
Саша Лютаев 2 months ago
конечно, с чувстом юмора заморочек дудки)) я моментами аж чуток-ли не до слез хохотал, в особенности под крышка видео, когда дошло до адаптации блога)) что его аж прям перекорячило )))))))))))
Cancator 2 months ago
ребят кушать у кого неувязка с Optimize сборкой? у меня когда -media.sass компилиться пропадает @media и в итоге или мобильные стили работают или декстоп, и приходится вручную управлять добавляя скобки
Cancator 2 months ago
Разумеется я ничего не менял, и у меня также оно подписанно, неувязка в том что gulp неправильно собирает
Anton Cherry 2 months ago
наверняка все дело в том, что у Алексея -media.sass написано чрез нижнее подчеркивание _media.sass
WebDesign Master 2 months ago
У меня не наблюдается, работает исправно.
Артур Германович 2 months ago
Спасибо за качественый контент
Lensom Rybk 2 months ago
Почему вы сделали кнопки header-buttons чрез тег <a>, а не чрез тег <button> ? Или это дело причивычки?
Lensom Rybk 2 months ago
Спасибо
WebDesign Master 2 months ago
Причина в том, что это ссылки, которые на теоретическом уровне должны водить на другие странички, а не кнопки, которые сабмитили бы форму.
Alexander Voronov 2 months ago
Были проекты на Drupal 8?
Виталий Ходачинский 2 months ago
Огромное благодарю для тебя !!! Как вечно всё весьма информативно и здорово.
Dispel TR 2 months ago
У css grid помощь 72% против 96% у flexbox думаю покамест на флексе останусь. Будет ли видео по верстке макета на flexbox либо bootstrap 4?
Владимир Гнатовский 2 months ago
Ну если будто для ознакомления и ожидания пришествия новейшей эры, то конечно супер. Если осматривать будто реальный проект на текущий момент заказчик такое не воспримет. в ie верстка совершенно страшно смотрится. То, что все в одну колонку фиг с ним, однако краска шрифта в шапке не читаем + на нижних плашках фото совершенно не показываются. Тут нужно раздельно прогружать версию для тех устройств, которые покамест не поддерживают гриды. P.S. виде смотрел отрывками, если в видео кушать разъяснения про костыль для непонимающих гриды то это +. Но на самом примере верстки такового костыля дудки =(
Дмитрий Ткаченко 2 months ago
За пол года с 33% 74 практически, чрез ещё пол года во всех браузерах. Пока соберёшься учить выдумают последующую технологию. Кстати никто не воспрещает сочетать флекс и гриды в одном проекте, позиционируем элементы будто желаем.
Владимир Гнатовский 2 months ago
ок, для РФ может быть такового варианта хватит. Но что мастерить с UC Browser либо Samsung Internet, их суммарная толика в мире 11,68% это все-таки много для игнорирования. Потому верстая на гридах нужно обмыслить о тех, у кого они не работают. Потому покамест помощь не улучшится их рановато юзать.
Дмитрий Ткаченко 2 months ago
для глуповатых ms префикс и работает на ie 11 search=css%20grid
Виталий Ходачинский 2 months ago
Гаттеры - Шматтеры)
Alex White 2 months ago
Спасибо! Я потом предшествующего видео уже начал использовать CSS Grid =) Классная штука!
Paco Official 2 months ago
нужно будто нить поглядеть
Andrey Bondarev 2 months ago
Люто плюсую, издавна ожидал подобного
Вадим 2 months ago
Новое видео , новенькая гипотиза саблайма, денек - праздничек!
Дмитрий Бобков 2 months ago
оооо пять! Спасибо
brin gonor 2 months ago
Алексей круто будто вечно ))
Сергій Войтюк 2 months ago
О. новоиспеченный видосик)) лайк не смотря! )