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

3937 ratings | 113534 views


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

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

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

WebDesign Master 1 year ago
Верстка реального макета с внедрением CSS Grid:
Александр Македонский 9 months ago
WebDesign Master Привет. Как считаешь можно ли уже grid для заказов на фрилансе юзать (лендинги, визитки)? Или длительно еще ожидать?
akva tox 11 months ago
Подскажите отчего логотип изготовленный в фотошоп не раскрывается в шаблоне ворпрес? остаётся файликом, а на рабочем столе изображение емть и в паинте тоже раскрывается. Хотя другие рисунки из веба загружаются
N S 1 year ago
Спасибо Алексей! Очень любопытно, понятно излагаете все свои мысли и внимать приятно, будто документалку на канале Discovery ))
Ivan Stepanoff 3 months ago
Прелестно!. Правда, для осла придется снова обучать таблицы((( и мастерить спецвариант загрузка ослиного шаблона. Какие ишаки еще посиживают на осле??? Лет чрез 5 будет животрепещуще.
Friday 3 months ago
благодарю
Esbol Adeiuly 3 months ago
83 % caniuse думаю можно использовать либо спозаранку
Sergiy Kuguk 5 months ago
Спасибо весьма нужный задание, весьма отлично и доходчиво объясняешь, не достаточно кто этак разжевывает.
Shuttle Forecasts 5 months ago
Замечательный задание, лучше покамест не отыскал, благодарю!
Koto Baza 5 months ago
Думал Grid будет малость никчемным по сопоставлению с flexbox, однако,посмотев это видео, сообразил, Grid это предмет
Илья Карлюк 5 months ago
Спасибо создателю!👍
Alex Kikot 5 months ago
Большое благодарю! Приятно понятнее.
Элпис Лама 6 months ago
весьма подходящая предмет! не знала о таком. благодарю!
All Lat 6 months ago
это круче flexbox. А стоит ли его обучать?
Танки Онлайн - Паркур 7 months ago
27:34 - *item-1* 27:44 - *Блок-1*
Шынболат Жаксыбаев 7 months ago
А будто быть с explorer-ом?
Шынболат Жаксыбаев 7 months ago
Жаль естественно. Но предмет хорошая!
WebDesign Master 7 months ago
Ждать.
Позитроныч 8 months ago
Я этак и знал, что про 5 элемент что-нибудь сказанешь = )
Чынгыз Усенов 8 months ago
Ребят вы меж айтемами увидели точки котрые исчезают?
Чынгыз Усенов 8 months ago
)))) Спасибо за ваши уроки)) Продолжайте в таком же духе. Очень помогаете!
WebDesign Master 8 months ago
Ну конечно ещё при записи урока увидел, не придал значения ))
Чынгыз Усенов 8 months ago
конечно! Вы это тоже видите?
WebDesign Master 8 months ago
Скорее итого это оптическая иллюзия.
Чынгыз Усенов 8 months ago
14:43 поставьте на паузуи поглядите на айтемы. Вы увидите на перекрестках точки которые мгновенно исчезают.
urbanmaugli sq 8 months ago
Спасибо!
maxsimus xxll 8 months ago
Ето какая-то мистика
Andrew Vlasoff 9 months ago
Алексей 9 months ago
Сайты строятся из блоков ,windows 10 тоже квадратный,установилась эпоха квадратов )))
Вадим Орлов 9 months ago
Боже мой, сколько магии с минимумом кода можно создавать с этим инвентарем. Я прошерстил веб, попрактиковался, и уже не могу представить свою верстку без гридов;) Спасибо за то, что поведал о нем, а то миксовал бы и далее флексбоксы с процентами)
ID page 9 months ago
А браузеры нормально поддерживают гриды? Их на данный момент стоит использовать? Каков шанс утратить трафик?
Arzuman Suleymanov 9 months ago
Огромное благодарю! Очень все понятно, вы специалист собственного дела. Кто знаком поверхностно с версткой усвоит все сходу. Так содержать!!!
Arhimed 9 months ago
Один из наилучших каналов! Спасибо для тебя за все, что ты делаешь!
Глеб Бондаренко 9 months ago
Великолепный туториал, благодарю!
Евгений Кабаргин 10 months ago
Очень понравилось ваше разъяснение сможете сделать видео еще по CSS flexbox и сопоставить его с CSS Grid. Еще любопытно будет выяснить про препроцессоры less sass и будто с ними трудиться.
WebDesign Master 10 months ago
Да, кушать в планах.
Евгений Кабаргин 10 months ago
Спасибо. а по CSS flexbox планируете сделать видео?
WebDesign Master 10 months ago
Sass:
Levelord 10 months ago
23:40 Вот это мне тяжело осознать, вообщем не даётся, играл в Grid Garden, пришёл сюда за подробными объяснениями. старт даём 1, енд 3, разумно же что он обязан занять 1, 2 и 3 пункт, отчего он занимает лишь 2?! Это не начин третьего, это крышка 2го блин. Когда указываем енд 5, то он занимает 4 блока, епт, НУ ПОЧЕМУ? Чувак этак круто разъясняет, однако я растерял осознание ситуации на этом моменте.
Levelord 10 months ago
0|1|2|3 Тогда разумно бы было строчить в старте не 1, а 0, один эти номера определяют не номер элемента, а их границы. Ладно, смирюсь и попросту для себя уясню что необходимо мастерить всё по номерам, однако убавлять единицу от енда, и продолжу глядеть.
WebDesign Master 10 months ago
Потому, что это не число частей. Это дефиниция ОТ какой позиции и ДО какой позиции необходимо мастерить селект.
Maxim Gleischer 10 months ago
Мир ворачивается к верстке таблицами :)
Валентин Стратович 10 months ago
Господи,так совершенно и попросту! В статьях будто-то очень заумно и примеры не весьма,у вас же все попросту совершенно! Вы золотой человек!
eagle eye 10 months ago
Рахмат! Спасибо! Thank you!
4 building 10 months ago
Чотко!
Multi DESTROER 10 months ago
совершенно точно лайк и подписка. Очень детализированное и информативное видео)
Harutyun Ghandilyan 10 months ago
Приколист
IQ Bot 10 months ago
Спасибо, крутая разработка! Замена кучи Css и JavaScript кода.
Максим Сенников 11 months ago
Подскажите изволь, отчего в строке grid-column- end: ставиться -1, где можно поглядеть разъяснение на эту тему.
Павел Клюев 11 months ago
Вопрос по fr, верно я сообразил это будто аналог flex-grow?
Максим Быстрянцев 11 months ago
Отличный задание. Для знакомства попросту то что необходимо.
White Box 11 months ago
Дружище ты наилучший! Без шуток, у тебя самые информативные уроки!
Rufat Ahmadzada 11 months ago
подскажите изволь будто подогнать картину под <div>, в display: grid;?
John Smith 11 months ago
огромное благодарю, весьма познавательное видео, хорошая труд
Yana T 11 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)
Олег Павловский 3 months ago
27:24 шуточка про 5й элемент
Оро 1 year ago
Кто-нибудь может приблизительно произнести, сколько лет будет трудиться еще Flexbox?
Rufat Ahmadzada 1 year ago
хороший задание!!!
loki 1 year ago
попросту бомба, конечно прибудет с тобой мочь чувак! лайк совершенно точно
Егор Готье 1 year ago
Дай для тебя Бог здоровья! Замечательная подача материала!
asfsaf asfdsaf 1 year ago
у вас кушать видео по Pixel-perfect извращениям? конкретно будто верно мастерить безупречные отступы сочетая line-height, padding, margin, spacing для одно и многострочных частей
Ден Неважно 1 year ago
чего лишь не выдумают, только бы на таблицах не верстать.
dies irae 3 months ago
ты не сумел в юмор
Никита Савченко 4 months ago
Ну конечно, лучше на старых таблицах верстать, конечно?
Ivan Zolotukhin 1 year ago
A great lesson, thank you.
Артем 1 year ago
Terrific! Thank you!
Samvel Hayrapetyan 1 year ago
суперрррррррррррррррррррр, вы супер !!! а будто написать grid-template-columns: с auto-fill и 1fr 1fr 1fr ? то кушать желаю произнести без replace
LuckyGamerTV 1 year ago
@WebDesign Master, хороший денек, подскажите будто сделать чтоб в строке было очень 3 элемента, однако они поддерживали auto-fit , т.е. при сужении они выстраивались в столбик.
PropovedNik 1 year ago
а если немало колонок и понизу футер, то нужно строчить футер 8 один, чтоб он во всю ширину колонок был либо можно будто-то одним словом это показать?
Алексей Яранкин 1 year ago
Спасибо! Отличное видео! Интересно попросту, кто дизлайки такому контенту ставит?
alex nixon 1 year ago
20:08 отчего заместо ширины изменяются отступы???? minmax(60px,1fr) по идее должна изменяться ширина.
alex nixon 1 year ago
даже если на данный момент забежать на 1 образец и поставить grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); изменяется ширина, однако никак не отступы
Maxim Makow 1 year ago
Решил здесь не так давно подновить познания по Сss, и натолкнулся на это видео. Новые способности CSS Grid попросту супер! Давно я ожидал что-то подобного. Автору благодарю.
DrT1MA 1 year ago
лайк за Миллу)
Daniel_Wesson 1 year ago
Очень информативно. А будто сделать что бы было 3 колонки по 1fr и что бы любой блок в этой всей сетке имел такую же высоту будто и ширину? Проще говоря, сетка из КВАДРАТОВ в 3 колонки
Денис Георгиевич 1 year ago
Все круто. Правда я дерево и не понимаю. Но весьма интереснр
Чити Васегаран 1 year ago
Шах и мат bootstrap!)
Даниил Голубятников 1 year ago
Пришлось похохотать, когда удаляли 5-ый элемент..)
Павел Пеников 1 year ago
Bootstrap идет лесом?
WebDesign Master 1 year ago
Нет.
Vitalii 1 year ago
Спасибо! Очень животрепещущая информация на этот момент! Как ты лишь успеваешь за всем смотреть )
Санчо Пансо 1 year ago
Годный задание)
Friden Craw 1 year ago
Как именуется программка, которую ты используешь?
Aleksandr Kokin 1 year ago
Благодарствую за контент
Moe Green 1 year ago
Круто! Преподавать - тоже необходимо уметь. У Вас это выходит, Алексей ))
sp 1 year ago
Технология то крутая, осталось лишь ожидать, восторгаться и уповают когда будет помощь с выше 95% А на этот момент flexbox у руля, для реальных проектов.
Myas noy 1 year ago
я вот думаю - кушать ли резон использовать в проекте технологию которая официально вышла лишь в середине 2к17?
WebDesign Master 1 year ago
Нет естественно. Я безустанно повторяю: на продакшен - лишь испытанные совместимые технологии. Пока что гриды - это наинтереснейшая разработка для исследования.
Anton Noginov 1 year ago
Привет Алексей. Скажи изволь а будет видео по новенькому sablimetext 3?
El Negro 1 year ago
Спасибо за видео, весьма наглядно, будем поглядеть.
Павел Бездорнов 1 year ago
Бро ты будешь мастерить обозрение Bootstrap?
parampampamtsss 7 months ago
В бутстрапе не лишь адаптивная сетка. Там цельный комплект плюшек, анимации, для которых не необходимо шарить js/jq и т.д.
SimaDmtr 9 months ago
Зачем для тебя бутстрап если кушать гриды?)
Павел Бездорнов 1 year ago
4
Tre 1 year ago
Божечки боже, я ожидал этого 10 лет.
Vitaliy Bereza 1 year ago
ahuenno   😮
Makselio Buyakuri 1 year ago
попросту потрясающе!, благодарю
unistar42 1 year ago
Отличное видео, попросту и понятно всё. Жаль, что покамест что еще использовать невозможно - это в разы бы ускорило верстку. Но некоторое эмоция красивого во мне негодует: 1) нУжно , а не нужнО , 2) срЕдствами , а не средствАми. А в остальном всё волшебно. Моё вам благодарю и лайк. :)
Amir J 1 year ago
css grid будто и bootstrap просит подключения? Я сообразил что дудки
WebDesign Master 1 year ago
Нет.
Vitaly Orlov 1 year ago
Очень круто и информативно. Спасибо большущее!
Amir J 1 year ago
Так выходит bootstrap уже отпадает?
WebDesign Master 1 year ago
Годика этак чрез 2-3 отпадёт ))
Chingiz Arziev 1 year ago
А можно попросить сделать маленький лэндинг с помощью Grid. Пожалуйста.
Илья Готвянский 1 year ago
Через какую программку он работает?(прописует код)
FrontEndUkraine 1 year ago
Очень интерестно ,ждем курс контента в этой теме!)))
ProodЪ First 1 year ago
27:23 зачет
WikiMyClass 1 year ago
Мне будто css grid даже удобнее чем flexbox. Как лишь css grid станет нормально поддерживаться браузерами он очень урежет нишу фреймворков
KillerTime html-coder 1 year ago
афигеть круто :)
Суровые Будни 1 year ago
Хорошо объясняешь, благодарю1
AnnA Af 1 year ago
круто! и по мне дак проще флексов)) ну-ка это естественно же персонально
Arcanennik 1 year ago
Думаю за этим будущее. Лет чрез 5 все этак верстать будут, а года чрез 2 уже будут такие заказы.
Александр Tochcha 1 year ago
bootstrap 4 отменяется? )
Станислав Волохов 1 year ago
удивительно что заместо того чтобы добавить флексам костыль auto-fit , создается новоиспеченный способ с новым заглавием и синтаксисом и собственной совместимостью
Krot TV 1 year ago
Приятно на это глядеть) Продолжайте этак далее. Рассказывайте про новые и крутые технологии, это весьма любопытно. Спасибо.
Олег Балтаг 1 year ago
Не знаю что здесь сложного, все попросту и достаточно интуитивно. Скорей бы все браузеры начали поддерживать, а то задолбало.
Dmitry Popov 1 year ago
С 5м элементом было внезапно) благодарю за материал
Игорь Лукьянов 1 year ago
в grid-gap можно устанавливать 2-а значения ------ grid-gap: 20рх(по вертикали ) 10рх(по горизонтали) ;
Aleksandr Krichevcov 1 year ago
Офигеть! Шикарнейший прибор! Спасибо за обозрение.))
gfreemankz 1 year ago
Причем здесь Мила Евович?:)
WebDesign Master 1 year ago
Потому, что пришлось выслать 5-ый элемент без её ведома.
Vladimir Ishchenko 1 year ago
Большое благодарю за задание)
Саша Александров 1 year ago
Отличный задание, я для закрепления материала могу порекомендовать cssgridgarden.com , надеюсь создатель не удалит полезную ссылку)
Алексей Мельничук 1 year ago
Еще от того же создателя, однако уже по флексам
Максим Мещеряков 1 year ago
Класс, класс! Это точно будущее! Спасибо Алексей!
Роман Предеин 1 year ago
Спасибо за видео! Очень любопытно.
creat vav 1 year ago
YouDo это твой проект ? )
Daniel Hell 1 year ago
Лайк! Побольше бы схожих уроков.