CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство

3476 ratings | 97257 views


CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство

Полезно? Подпишись на канал: Создание контентного сайта на Jekyll от А до Я: Создание современного интернет-магазина от А до Я: Я - фрилансер! - Руководство успешного фрилансера: Страница урока с примерами из видео: Реши любую задачу с YouDo! - Всем привет. Сегодня мы рассмотрим новейшую технику адаптивной вёрстки сайтов с использованием CSS Grid. Группа Вконтакте: Реклама на канале:

Comments to the video: CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство

WebDesign Master 9 months ago
Верстка реального макета с внедрением CSS Grid:
Александр Македонский 4 months ago
WebDesign Master Привет. Как считаешь можно ли уже grid для заказов на фрилансе юзать (лендинги, визитки)? Или длительно еще ожидать?
akva tox 5 months ago
Подскажите отчего логотип изготовленный в фотошоп не раскрывается в шаблоне ворпрес? остаётся файликом, а на рабочем столе изображение емть и в паинте тоже раскрывается. Хотя другие рисунки из веба загружаются
N S 8 months ago
Спасибо Алексей! Очень любопытно, понятно излагаете все свои мысли и внимать приятно, будто документалку на канале Discovery ))
Nad Zahharova 23 days ago
весьма подходящая предмет! не знала о таком. благодарю!
All Lat 23 days ago
это круче flexbox. А стоит ли его обучать?
Танки Онлайн - Паркур 1 month ago
27:34 - *item-1* 27:44 - *Блок-1*
Шынболат Жаксыбаев 1 month ago
А будто быть с explorer-ом?
Шынболат Жаксыбаев 1 month ago
Жаль естественно. Но предмет хорошая!
WebDesign Master 1 month ago
Ждать.
Позитроныч 2 months ago
Я этак и знал, что про 5 элемент что-нибудь сказанешь = )
Чынгыз Усенов 2 months ago
Ребят вы меж айтемами увидели точки котрые исчезают?
Чынгыз Усенов 2 months ago
)))) Спасибо за ваши уроки)) Продолжайте в таком же духе. Очень помогаете!
WebDesign Master 2 months ago
Ну конечно ещё при записи урока увидел, не придал значения ))
Чынгыз Усенов 2 months ago
конечно! Вы это тоже видите?
WebDesign Master 2 months ago
Скорее итого это оптическая иллюзия.
Чынгыз Усенов 2 months ago
14:43 поставьте на паузуи поглядите на айтемы. Вы увидите на перекрестках точки которые мгновенно исчезают.
urbanmaugli sq 3 months ago
Спасибо!
maxsimus xxll 3 months ago
Ето какая-то мистика
Andrew Vlasoff 3 months ago
Хвостик 3 months ago
Сайты строятся из блоков ,windows 10 тоже квадратный,установилась эпоха квадратов )))
Вадим Орлов 3 months ago
Боже мой, сколько магии с минимумом кода можно создавать с этим инвентарем. Я прошерстил веб, попрактиковался, и уже не могу представить свою верстку без гридов;) Спасибо за то, что поведал о нем, а то миксовал бы и далее флексбоксы с процентами)
Slawa Lokosov 3 months ago
А браузеры нормально поддерживают гриды? Их на данный момент стоит использовать? Каков шанс утратить трафик?
Arzuman Suleymanov 3 months ago
Огромное благодарю! Очень все понятно, вы специалист собственного дела. Кто знаком поверхностно с версткой усвоит все сходу. Так содержать!!!
Arhimed 4 months ago
Один из наилучших каналов! Спасибо для тебя за все, что ты делаешь!
Глеб Бондаренко 4 months ago
Великолепный туториал, благодарю!
Евгений Кабаргин 4 months ago
Очень понравилось ваше разъяснение сможете сделать видео еще по CSS flexbox и сопоставить его с CSS Grid. Еще любопытно будет выяснить про препроцессоры less sass и будто с ними трудиться.
WebDesign Master 4 months ago
Да, кушать в планах.
Евгений Кабаргин 4 months ago
Спасибо. а по CSS flexbox планируете сделать видео?
WebDesign Master 4 months ago
Sass:
Levelord 4 months ago
23:40 Вот это мне тяжело осознать, вообщем не даётся, играл в Grid Garden, пришёл сюда за подробными объяснениями. старт даём 1, енд 3, разумно же что он обязан занять 1, 2 и 3 пункт, отчего он занимает лишь 2?! Это не начин третьего, это крышка 2го блин. Когда указываем енд 5, то он занимает 4 блока, епт, НУ ПОЧЕМУ? Чувак этак круто разъясняет, однако я растерял осознание ситуации на этом моменте.
Levelord 4 months ago
0|1|2|3 Тогда разумно бы было строчить в старте не 1, а 0, один эти номера определяют не номер элемента, а их границы. Ладно, смирюсь и попросту для себя уясню что необходимо мастерить всё по номерам, однако убавлять единицу от енда, и продолжу глядеть.
WebDesign Master 4 months ago
Потому, что это не число частей. Это дефиниция ОТ какой позиции и ДО какой позиции необходимо мастерить селект.
Maxim Gleischer 4 months ago
Мир ворачивается к верстке таблицами :)
Валентин Стратович 5 months ago
Господи,так совершенно и попросту! В статьях будто-то очень заумно и примеры не весьма,у вас же все попросту совершенно! Вы золотой человек!
eagle eye 5 months ago
Рахмат! Спасибо! Thank you!
4 building 5 months ago
Чотко!
Multi DESTROER 5 months ago
совершенно точно лайк и подписка. Очень детализированное и информативное видео)
Harutyun Ghandilyan 5 months ago
Приколист
IQ Bot 5 months ago
Спасибо, крутая разработка! Замена кучи Css и JavaScript кода.
Максим Сенников 5 months ago
Подскажите изволь, отчего в строке grid-column- end: ставиться -1, где можно поглядеть разъяснение на эту тему.
Павел Клюев 5 months ago
Вопрос по fr, верно я сообразил это будто аналог flex-grow?
Максим Быстрянцев 5 months ago
Отличный задание. Для знакомства попросту то что необходимо.
White Box 5 months ago
Дружище ты наилучший! Без шуток, у тебя самые информативные уроки!
Rufat Ahmadzada 6 months ago
подскажите изволь будто подогнать картину под <div>, в display: grid;?
John Smith 6 months ago
огромное благодарю, весьма познавательное видео, хорошая труд
Yana T 6 months ago
1:24 display:grid, фиксированные колонки (grid-template-columns) 3:10 фиксированные ряды (grid-template-rows) 4:00 дефолтное смысл высоты рядов (grid-auto-rows) 4:42 разрыв меж элементами (grid-column-gap? grid-row-gap, grid-gap) 6:12 резиновые колонки, кол измерения fr, фракция 8:49 повторение шаблона (repeat) 11:52 отзывчивый дизайн (minmax) 14:20 minmax для колонок (grid-auto-rows) 15:35 распорядок частей по вертикали (grid-auto-flow) 18:07 автоматическая перестройка сетки (auto-fill, auto-fit) 22:34 позиция элемента на полосы (grid-column-start, grid-column-end, grid-column, grid-row) 27:38 выравнивание всех частей (justify-items, align-items) 29:52 выравнивание каждого отдельного элемента (align-self, justify-self) 30:28 управление областями (grid-area + grid-template-areas) 35:40 вложенные гриды 37:07 сокращенная запись (grid-template)
Оро 6 months ago
Кто-нибудь может приблизительно произнести, сколько лет будет трудиться еще Flexbox?
Rufat Ahmadzada 6 months ago
хороший задание!!!
loki loki 6 months ago
попросту бомба, конечно прибудет с тобой мочь чувак! лайк совершенно точно
Егор Готье 6 months ago
Дай для тебя Бог здоровья! Замечательная подача материала!
asfsaf asfdsaf 6 months ago
у вас кушать видео по Pixel-perfect извращениям? конкретно будто верно мастерить безупречные отступы сочетая line-height, padding, margin, spacing для одно и многострочных частей
Ден Неважно 6 months ago
чего лишь не выдумают, только бы на таблицах не верстать.
Ivan Zolotukhin 6 months ago
A great lesson, thank you.
Артем 7 months ago
Terrific! Thank you!
Samvel Hayrapetyan 7 months ago
суперрррррррррррррррррррр, вы супер !!! а будто написать grid-template-columns: с auto-fill и 1fr 1fr 1fr ? то кушать желаю произнести без replace
LuckyGamerTV 7 months ago
@WebDesign Master, хороший денек, подскажите будто сделать чтоб в строке было очень 3 элемента, однако они поддерживали auto-fit , т.е. при сужении они выстраивались в столбик.
PropovedNik 7 months ago
а если немало колонок и понизу футер, то нужно строчить футер 8 один, чтоб он во всю ширину колонок был либо можно будто-то одним словом это показать?
Алексей Яранкин 7 months ago
Спасибо! Отличное видео! Интересно попросту, кто дизлайки такому контенту ставит?
alex nixon 7 months ago
20:08 отчего заместо ширины изменяются отступы???? minmax(60px,1fr) по идее должна изменяться ширина.
alex nixon 7 months ago
даже если на данный момент забежать на 1 образец и поставить grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); изменяется ширина, однако никак не отступы
Maxim Makow 7 months ago
Решил здесь не так давно подновить познания по Сss, и натолкнулся на это видео. Новые способности CSS Grid попросту супер! Давно я ожидал что-то подобного. Автору благодарю.
DrT1MA 7 months ago
лайк за Миллу)
Daniel_Wesson 7 months ago
Очень информативно. А будто сделать что бы было 3 колонки по 1fr и что бы любой блок в этой всей сетке имел такую же высоту будто и ширину? Проще говоря, сетка из КВАДРАТОВ в 3 колонки
Денис Георгиевич 8 months ago
Все круто. Правда я дерево и не понимаю. Но весьма интереснр
Чити Васегаран 8 months ago
Шах и мат bootstrap!)
Даниил Голубятников 8 months ago
Пришлось похохотать, когда удаляли 5-ый элемент..)
Павел Пеников 8 months ago
Bootstrap идет лесом?
WebDesign Master 8 months ago
Нет.
Vitalii 8 months ago
Спасибо! Очень животрепещущая информация на этот момент! Как ты лишь успеваешь за всем смотреть )
Санчо Пансо 8 months ago
Годный задание)
Friden Craw 8 months ago
Как именуется программка, которую ты используешь?
Aleksandr Kokin 9 months ago
Благодарствую за контент
Moe Green 9 months ago
Круто! Преподавать - тоже необходимо уметь. У Вас это выходит, Алексей ))
sp 9 months ago
Технология то крутая, осталось лишь ожидать, восторгаться и уповают когда будет помощь с выше 95% А на этот момент flexbox у руля, для реальных проектов.
Myas noy 9 months ago
я вот думаю - кушать ли резон использовать в проекте технологию которая официально вышла лишь в середине 2к17?
WebDesign Master 9 months ago
Нет естественно. Я безустанно повторяю: на продакшен - лишь испытанные совместимые технологии. Пока что гриды - это наинтереснейшая разработка для исследования.
Anton Noginov 9 months ago
Привет Алексей. Скажи изволь а будет видео по новенькому sablimetext 3?
El Negro 9 months ago
Спасибо за видео, весьма наглядно, будем поглядеть.
Павел Бездорнов 9 months ago
Бро ты будешь мастерить обозрение Bootstrap?
parampampamtsss 1 month ago
В бутстрапе не лишь адаптивная сетка. Там цельный комплект плюшек, анимации, для которых не необходимо шарить js/jq и т.д.
SimaDmtr 3 months ago
Зачем для тебя бутстрап если кушать гриды?)
Павел Бездорнов 9 months ago
4
Tre 9 months ago
Божечки боже, я ожидал этого 10 лет.
Vitaliy Bereza 9 months ago
ahuenno   😮
Makselio Buyakuri 9 months ago
попросту потрясающе!, благодарю
unistar42 9 months ago
Отличное видео, попросту и понятно всё. Жаль, что покамест что еще использовать невозможно - это в разы бы ускорило верстку. Но некоторое эмоция красивого во мне негодует: 1) нУжно , а не нужнО , 2) срЕдствами , а не средствАми. А в остальном всё волшебно. Моё вам благодарю и лайк. :)
Amir J 9 months ago
css grid будто и bootstrap просит подключения? Я сообразил что дудки
WebDesign Master 9 months ago
Нет.
Vitaly Orlov 9 months ago
Очень круто и информативно. Спасибо большущее!
Amir J 9 months ago
Так выходит bootstrap уже отпадает?
WebDesign Master 9 months ago
Годика этак чрез 2-3 отпадёт ))
Chingiz Arziev 9 months ago
А можно попросить сделать маленький лэндинг с помощью Grid. Пожалуйста.
Илья Готвянский 9 months ago
Через какую программку он работает?(прописует код)
FrontEndUkraine 9 months ago
Очень интерестно ,ждем курс контента в этой теме!)))
ProodЪ First 9 months ago
27:23 зачет
WikiMyClass 9 months ago
Мне будто css grid даже удобнее чем flexbox. Как лишь css grid станет нормально поддерживаться браузерами он очень урежет нишу фреймворков
KillerTime html-coder 9 months ago
афигеть круто :)
Суровые Будни 9 months ago
Хорошо объясняешь, благодарю1
AnnA Af 9 months ago
круто! и по мне дак проще флексов)) ну-ка это естественно же персонально
Arcanennik 9 months ago
Думаю за этим будущее. Лет чрез 5 все этак верстать будут, а года чрез 2 уже будут такие заказы.
Александр Tochcha 9 months ago
bootstrap 4 отменяется? )
Станислав Волохов 9 months ago
удивительно что заместо того чтобы добавить флексам костыль auto-fit , создается новоиспеченный способ с новым заглавием и синтаксисом и собственной совместимостью
Krot TV 9 months ago
Приятно на это глядеть) Продолжайте этак далее. Рассказывайте про новые и крутые технологии, это весьма любопытно. Спасибо.
Олег Балтаг 9 months ago
Не знаю что здесь сложного, все попросту и достаточно интуитивно. Скорей бы все браузеры начали поддерживать, а то задолбало.
Dmitry Popov 9 months ago
С 5м элементом было внезапно) благодарю за материал
Игорь Лукьянов 9 months ago
в grid-gap можно устанавливать 2-а значения ------ grid-gap: 20рх(по вертикали ) 10рх(по горизонтали) ;
Aleksandr Krichevcov 9 months ago
Офигеть! Шикарнейший прибор! Спасибо за обозрение.))
gfreemankz 9 months ago
Причем здесь Мила Евович?:)
WebDesign Master 9 months ago
Потому, что пришлось выслать 5-ый элемент без её ведома.
Alex Star 9 months ago
Уже можно их использовать?!)))
Vladimir Ishchenko 9 months ago
Большое благодарю за задание)
Саша Александров 9 months ago
Отличный задание, я для закрепления материала могу порекомендовать cssgridgarden.com , надеюсь создатель не удалит полезную ссылку)
Алексей Мельничук 9 months ago
Еще от того же создателя, однако уже по флексам
Максим Мещеряков 9 months ago
Класс, класс! Это точно будущее! Спасибо Алексей!
Роман Предеин 9 months ago
Спасибо за видео! Очень любопытно.
creat vav 9 months ago
YouDo это твой проект ? )
Daniel Hell 9 months ago
Лайк! Побольше бы схожих уроков.
Диванный Эксперт 9 months ago
ребзя, учим на данный момент, пользуем где позволяют либо для себя. Зато когда выстрелит будем уже во все орудия)) а оно выстрелит ибо хайп стоит обычный)
Billie Willie 9 months ago
Вообще неясно отчего гриды уже удостоились вашего внимания, а флексы ещё дудки
Kukushioku 9 months ago
WebDesign Master видео по флексу в вашем выполнении было бы круто. Хотя бы в таком же формате будто и данное видео
WebDesign Master 9 months ago
Посмотрим.
Billie Willie 9 months ago
В целом я написал коммент, чтоб побудить сбросить вас ролик про уже пришедшую технологию - флексбоксы. Думаю это будет бомба)
WebDesign Master 9 months ago
Потому, что Флекс уровня блоков по собственному природному предназначению и они посредственны. Гриды - степень итого лейаута и это круто.
Диванный Эксперт 9 months ago
гриды хайпанули и на волне хайпа их способности обозревает всё больше и больше людей. а флексы негромко появились, будто-то не сходу начали поддерживаться и хз) может я попросту не этак издавна в теме, лишь год+- учусь\смотрю и будто-то резко скакнуло с верстаем по флоатам до ждём гридов, они круты ) хотя исследовал и пользую флексы, они комфортны. Да и уверен, они останутся. будут на уровне апнутых инлайн-блоков) это не взаимоисключающие технологии) ps эт моё мировоззрение, может оно и верное, мож дудки)
Yaroslav Akulov 9 months ago
Лайк, кто из LF 😎
Happy 33white 9 months ago
Мне будто я слышу будто извилины в голове тягают телеги с информацией))
Доспехи Блоггера 9 months ago
Круто! Спасибо для тебя огромное! Как вечно ценная информация!
The Single Signal 9 months ago
Какой текстовый редактор?
Диванный Эксперт 9 months ago
ну-ка гласили же, кодепен это. codepen.io либо будто-то этак
K Dmitry 9 months ago
Тоже любопытно, что за текстовый педактор либо это on-line сервис?
Давид Бабучаишвили 9 months ago
Простите за неведение либо тупоумный проблема. Но что за окружение была в этом лицезрел и можно ли с ее помощью мастерить веб-сайты?
alex las 9 months ago
Давид Бабучаишвили codepen