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

2861 ratings | 72316 views


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

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

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

WebDesign Master 4 months ago
Верстка реального макета с внедрением CSS Grid:
akva tox 1 month ago
Подскажите отчего логотип изготовленный в фотошоп не раскрывается в шаблоне ворпрес? остаётся файликом, а на рабочем столе изображение емть и в паинте тоже раскрывается. Хотя другие рисунки из веба загружаются
N S 4 months ago
Спасибо Алексей! Очень любопытно, понятно излагаете все свои мысли и внимать приятно, будто документалку на канале Discovery ))
ed em 21 hours ago
Один из наилучших каналов! Спасибо для тебя за все, что ты делаешь!
Глеб Бондаренко 1 day ago
Великолепный туториал, благодарю!
Евгений Кабаргин 13 days ago
Очень понравилось ваше разъяснение сможете сделать видео еще по CSS flexbox и сопоставить его с CSS Grid. Еще любопытно будет выяснить про препроцессоры less sass и будто с ними трудиться.
WebDesign Master 13 days ago
Да, кушать в планах.
Евгений Кабаргин 13 days ago
Спасибо. а по CSS flexbox планируете сделать видео?
WebDesign Master 13 days ago
Sass:
Levelord 21 days ago
23:40 Вот это мне тяжело осознать, вообщем не даётся, играл в Grid Garden, пришёл сюда за подробными объяснениями. старт даём 1, енд 3, разумно же что он обязан занять 1, 2 и 3 пункт, отчего он занимает лишь 2?! Это не начин третьего, это крышка 2го блин. Когда указываем енд 5, то он занимает 4 блока, епт, НУ ПОЧЕМУ? Чувак этак круто разъясняет, однако я растерял осознание ситуации на этом моменте.
Levelord 21 days ago
0|1|2|3 Тогда разумно бы было строчить в старте не 1, а 0, один эти номера определяют не номер элемента, а их границы. Ладно, смирюсь и попросту для себя уясню что необходимо мастерить всё по номерам, однако убавлять единицу от енда, и продолжу глядеть.
WebDesign Master 21 days ago
Потому, что это не число частей. Это дефиниция ОТ какой позиции и ДО какой позиции необходимо мастерить селект.
Maxim Gleischer 25 days ago
Мир ворачивается к верстке таблицами :)
Валентин Стратович 27 days ago
Господи,так совершенно и попросту! В статьях будто-то очень заумно и примеры не весьма,у вас же все попросту совершенно! Вы золотой человек!
eagle eye 29 days ago
Рахмат! Спасибо! Thank you!
4 building 1 month ago
Чотко!
Multi DESTROER 1 month ago
совершенно точно лайк и подписка. Очень детализированное и информативное видео)
Harutyun Ghandilyan 1 month ago
Приколист
IQ Bot 1 month ago
Спасибо, крутая разработка! Замена кучи Css и JavaScript кода.
Максим Сенников 1 month ago
Подскажите изволь, отчего в строке grid-column- end: ставиться -1, где можно поглядеть разъяснение на эту тему.
Павел Клюев 1 month ago
Вопрос по fr, верно я сообразил это будто аналог flex-grow?
Максим Быстрянцев 1 month ago
Отличный задание. Для знакомства попросту то что необходимо.
White Box 1 month ago
Дружище ты наилучший! Без шуток, у тебя самые информативные уроки!
Rufat Ahmadzada 1 month ago
подскажите изволь будто подогнать картину под <div>, в display: grid;?
John Smith 1 month ago
огромное благодарю, весьма познавательное видео, хорошая труд
Yana T 2 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)
Оро 2 months ago
Кто-нибудь может приблизительно произнести, сколько лет будет трудиться еще Flexbox?
webdev341 2 months ago
Автор, издавна смотрю Ваши видео и читаю веб-сайт, весьма нравится преподнесение инфы. А сможете поведать будто сами изучали CSS Grid? Техдокументация, англоязычные туториалы?
Rufat Ahmadzada 2 months ago
хороший задание!!!
loki loki 2 months ago
попросту бомба, конечно прибудет с тобой мочь чувак! лайк совершенно точно
Егор Готье 2 months ago
Дай для тебя Бог здоровья! Замечательная подача материала!
asfsaf asfdsaf 2 months ago
у вас кушать видео по Pixel-perfect извращениям? конкретно будто верно мастерить безупречные отступы сочетая line-height, padding, margin, spacing для одно и многострочных частей
Ден Неважно 2 months ago
чего лишь не выдумают, только бы на таблицах не верстать.
Ivan Zolotukhin 2 months ago
A great lesson, thank you.
Артем 2 months ago
Terrific! Thank you!
Samvel Hayrapetyan 2 months ago
суперрррррррррррррррррррр, вы супер !!! а будто написать grid-template-columns: с auto-fill и 1fr 1fr 1fr ? то кушать желаю произнести без replace
LuckyGamerTV 2 months ago
@WebDesign Master, хороший денек, подскажите будто сделать чтоб в строке было очень 3 элемента, однако они поддерживали auto-fit , т.е. при сужении они выстраивались в столбик.
PropovedNik 3 months ago
а если немало колонок и понизу футер, то нужно строчить футер 8 один, чтоб он во всю ширину колонок был либо можно будто-то одним словом это показать?
Алексей Яранкин 3 months ago
Спасибо! Отличное видео! Интересно попросту, кто дизлайки такому контенту ставит?
alex nixon 3 months ago
20:08 отчего заместо ширины изменяются отступы???? minmax(60px,1fr) по идее должна изменяться ширина.
alex nixon 3 months ago
даже если на данный момент забежать на 1 образец и поставить grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); изменяется ширина, однако никак не отступы
Maxim Makow 3 months ago
Решил здесь не так давно подновить познания по Сss, и натолкнулся на это видео. Новые способности CSS Grid попросту супер! Давно я ожидал что-то подобного. Автору благодарю.
DrT1MA 3 months ago
лайк за Миллу)
Daniil_Angel 3 months ago
Очень информативно. А будто сделать что бы было 3 колонки по 1fr и что бы любой блок в этой всей сетке имел такую же высоту будто и ширину? Проще говоря, сетка из КВАДРАТОВ в 3 колонки
Денис Георгиевич 3 months ago
Все круто. Правда я дерево и не понимаю. Но весьма интереснр
Чити Васегаран 4 months ago
Шах и мат bootstrap!)
Даниил Голубятников 4 months ago
Пришлось похохотать, когда удаляли 5-ый элемент..)
Павел Пеников 4 months ago
Bootstrap идет лесом?
WebDesign Master 4 months ago
Нет.
Vitalii 4 months ago
Спасибо! Очень животрепещущая информация на этот момент! Как ты лишь успеваешь за всем смотреть )
Санчо Пансо 4 months ago
Годный задание)
Friden Craw 4 months ago
Как именуется программка, которую ты используешь?
Alexandr Kokin 4 months ago
Благодарствую за контент
Moe Green 4 months ago
Круто! Преподавать - тоже необходимо уметь. У Вас это выходит, Алексей ))
sp 4 months ago
Технология то крутая, осталось лишь ожидать, восторгаться и уповают когда будет помощь с выше 95% А на этот момент flexbox у руля, для реальных проектов.
Myas noy 4 months ago
я вот думаю - кушать ли резон использовать в проекте технологию которая официально вышла лишь в середине 2к17?
WebDesign Master 4 months ago
Нет естественно. Я безустанно повторяю: на продакшен - лишь испытанные совместимые технологии. Пока что гриды - это наинтереснейшая разработка для исследования.
Anton Noginov 5 months ago
Привет Алексей. Скажи изволь а будет видео по новенькому sablimetext 3?
El Negro 5 months ago
Спасибо за видео, весьма наглядно, будем поглядеть.
Павел Бездорнов 5 months ago
Бро ты будешь мастерить обозрение Bootstrap?
Павел Бездорнов 5 months ago
4
Tre 5 months ago
Божечки боже, я ожидал этого 10 лет.
Vitaliy Bereza 5 months ago
ahuenno   😮
Makselio Buyakuri 5 months ago
попросту потрясающе!, благодарю
unistar42 5 months ago
Отличное видео, попросту и понятно всё. Жаль, что покамест что еще использовать невозможно - это в разы бы ускорило верстку. Но некоторое эмоция красивого во мне негодует: 1) нУжно , а не нужнО , 2) срЕдствами , а не средствАми. А в остальном всё волшебно. Моё вам благодарю и лайк. :)
Amir J 5 months ago
css grid будто и bootstrap просит подключения? Я сообразил что дудки
WebDesign Master 5 months ago
Нет.
Vitaly Orlov 5 months ago
Очень круто и информативно. Спасибо большущее!
Amir J 5 months ago
Так выходит bootstrap уже отпадает?
WebDesign Master 5 months ago
Годика этак чрез 2-3 отпадёт ))
Chingiz Arziev 5 months ago
А можно попросить сделать маленький лэндинг с помощью Grid. Пожалуйста.
Илья Готвянский 5 months ago
Через какую программку он работает?(прописует код)
FrontEndUkraine 5 months ago
Очень интерестно ,ждем курс контента в этой теме!)))
ProodЪ First 5 months ago
27:23 зачет
Olexandr Coder 5 months ago
Мне будто css grid даже удобнее чем flexbox. Как лишь css grid станет нормально поддерживаться браузерами он очень урежет нишу фреймворков
KillerTime html-coder 5 months ago
афигеть круто :)
Суровые Будни 5 months ago
Хорошо объясняешь, благодарю1
AnnA Af 5 months ago
круто! и по мне дак проще флексов)) ну-ка это естественно же персонально
arhhi 5 months ago
Короче, трудиться можно приступить года чрез 3
Arcanennik 5 months ago
Думаю за этим будущее. Лет чрез 5 все этак верстать будут, а года чрез 2 уже будут такие заказы.
Александр Tochcha 5 months ago
bootstrap 4 отменяется? )
Станислав Волохов 5 months ago
удивительно что заместо того чтобы добавить флексам костыль auto-fit , создается новоиспеченный способ с новым заглавием и синтаксисом и собственной совместимостью
Krot TV 5 months ago
Приятно на это глядеть) Продолжайте этак далее. Рассказывайте про новые и крутые технологии, это весьма любопытно. Спасибо.
Олег Балтаг 5 months ago
Не знаю что здесь сложного, все попросту и достаточно интуитивно. Скорей бы все браузеры начали поддерживать, а то задолбало.
Dmitry Popov 5 months ago
С 5м элементом было внезапно) благодарю за материал
Игорь Лукьянов 5 months ago
в grid-gap можно устанавливать 2-а значения ------ grid-gap: 20рх(по вертикали ) 10рх(по горизонтали) ;
Aleksandr Krichevcov 5 months ago
Офигеть! Шикарнейший прибор! Спасибо за обозрение.))
gfreemankz 5 months ago
Причем здесь Мила Евович?:)
WebDesign Master 5 months ago
Потому, что пришлось выслать 5-ый элемент без её ведома.
Alex Star 5 months ago
Уже можно их использовать?!)))
Vladimir Ishchenko 5 months ago
Большое благодарю за задание)
Саша Александров 5 months ago
Отличный задание, я для закрепления материала могу порекомендовать cssgridgarden.com , надеюсь создатель не удалит полезную ссылку)
Алексей Мельничук 5 months ago
Еще от того же создателя, однако уже по флексам
Максим Мещеряков 5 months ago
Класс, класс! Это точно будущее! Спасибо Алексей!
Роман Предеин 5 months ago
Спасибо за видео! Очень любопытно.
creat vav 5 months ago
YouDo это твой проект ? )
Daniel Hell 5 months ago
Лайк! Побольше бы схожих уроков.
Диванный Эксперт 5 months ago
ребзя, учим на данный момент, пользуем где позволяют либо для себя. Зато когда выстрелит будем уже во все орудия)) а оно выстрелит ибо хайп стоит обычный)
Billie Willie 5 months ago
Вообще неясно отчего гриды уже удостоились вашего внимания, а флексы ещё дудки
Kukushioku 5 months ago
WebDesign Master видео по флексу в вашем выполнении было бы круто. Хотя бы в таком же формате будто и данное видео
WebDesign Master 5 months ago
Посмотрим.
Billie Willie 5 months ago
В целом я написал коммент, чтоб побудить сбросить вас ролик про уже пришедшую технологию - флексбоксы. Думаю это будет бомба)
WebDesign Master 5 months ago
Потому, что Флекс уровня блоков по собственному природному предназначению и они посредственны. Гриды - степень итого лейаута и это круто.
Диванный Эксперт 5 months ago
гриды хайпанули и на волне хайпа их способности обозревает всё больше и больше людей. а флексы негромко появились, будто-то не сходу начали поддерживаться и хз) может я попросту не этак издавна в теме, лишь год+- учусь\смотрю и будто-то резко скакнуло с верстаем по флоатам до ждём гридов, они круты ) хотя исследовал и пользую флексы, они комфортны. Да и уверен, они останутся. будут на уровне апнутых инлайн-блоков) это не взаимоисключающие технологии) ps эт моё мировоззрение, может оно и верное, мож дудки)
Yaroslav Akulov 5 months ago
Лайк, кто из LF 😎
Happy 33white 5 months ago
Мне будто я слышу будто извилины в голове тягают телеги с информацией))
Доспехи Блоггера 5 months ago
Круто! Спасибо для тебя огромное! Как вечно ценная информация!
The Single Signal 5 months ago
Какой текстовый редактор?
Диванный Эксперт 5 months ago
ну-ка гласили же, кодепен это. codepen.io либо будто-то этак
K Dmitry 5 months ago
Тоже любопытно, что за текстовый педактор либо это on-line сервис?
Давид Бабучаишвили 5 months ago
Простите за неведение либо тупоумный проблема. Но что за окружение была в этом лицезрел и можно ли с ее помощью мастерить веб-сайты?
alex las 5 months ago
Давид Бабучаишвили codepen
Game channel 5 months ago
По контенту вопросов дудки, однако вот пикселов , не могу расслабленно глядеть) А GRID этак вообщем волшебство, немало места и времени сберегает) P.S. Редактирую коммент уже 3-ий один (в процессе просмотра). Блииин, grid такая бомбезная предмет! Смотрю и не могу нарадоваться, сколько способностей))) Спасибо разработчикам, что сделали; и благодарю создателю, что показал нам!
Олександр Ходорівський 5 months ago
Ни Эдж, ни ИЕ10 такового не поддерживают ) мелкомягких необходимо лопатой по головушке ударить чтобы сделали нормально обновляемые браузеры )
Duoxx 4 months ago
партиальная помощь
faqqy 5 months ago
Да, пора наверное поглубже начинать учить гриды, ибо и истина за ними будущее. Спасибо Алексей, всё будто вечно на высшем уровне!
Пдс Закиров 5 months ago
охуеть чудеса, это означает что фреймов не будет под типа бутстрап, конечно еще и любой школьник сумеет такое мастерить
Dmitry 5 months ago
Не успел еще флексы освоить,а здесь уже гриды подъехали. Эх,будто стремительно всё развивается.
Диванный Эксперт 5 months ago
++ за год исследования вёрстки успел поучить флоаты, бутстрап3, jquery, флексы. из этого, по сущности, лишь флексы далее необходимы, остальное погибает либо уже там) будто гласил кто-то в коментах, при опыте в немало лет фронтом - это курс принуждает тебя вечно обучаться, многие не выдерживают и конкретно из-за этого уходят в бекэнд) однако отчего этого никто не гласит в начале пути, что б обдумывать в какой омут прыгаешь. однако блин, всё равно любопытно))
Vladimir Chernov 5 months ago
Мощный прибор, это трудно опровергать, однако и сложность его внедрения сравнима. ИМХО, хорошо написанная в один прекрасный момент(!) сетка на flexbox может накрыть бОльшую доля функционала гридов (а если гласить про реальные кейсы на продакшн -- то вообщем полный), при этом отпадает нужда повсевременно дописывать стили чрез @media, а управление поведением осуществляется классами. Если в проекте шаблоны правильно выделены в отдельные файлы (к примеру, применяется штамп проектирования MVC), то залезть в штамп и дописать/прибрать одинешенек класс куда проще, чем строчить целое правило в стилях. Вывод: даже если представить, что все браузеры уже на данный момент поддерживают технологию гридов, использовать их необходимо лишь в том случае, если ты весьма отлично понимаешь что делаешь, и для чего это необходимо. Пока что я не вижу ни одной предпосылки переезжать с flexbox-сеток на гриды. Поправьте, если не прав.
German Viktorovich 2 months ago
какая сложность, здесь из тегов резвее чем в фотошепе штамп собирается, попросту офигенно
Vladimir Chernov 5 months ago
большущее благодарю за ссылку. стало еще понятнее, в чём красота использования гридов. попробую будто-нибудь на новеньком проекте.
John Smith 5 months ago
если не стращает британский то здесь( ) дан хороший ответ на проблема для чего необходимы гриды
Ivan Anufriev 5 months ago
А можно сделать на CSS Grid подобие Masonry ? думаю многим будет здорово. С почтением, ваш подписчик.
John Smith 5 months ago
с grid-auto-flow dense можно поиграться
Александр Tochcha 5 months ago
а по-моему, будто один типа masonry сделать невозможно
Макс Шмася 5 months ago
На протяжении итого видео создатель указывает будто это сделать, и ты спрашиваешь можно ли этак сделать? =/
ПрО МаСтЕр 5 months ago
Алексей, Вы будто вечно наилучший!!! Ставить урокам Алексея Мне не понравилось - это все равно что плевать в тарелку с пищей, которая тебя кормит! Шли бы лучше крестиком вышивать!
MoonMoon 5 months ago
лайк, однако не пикселов, а пикселей, не?
Play Hard 5 months ago
Ааааахах мой мозг! Это круто естественно, однако покамест актуальнее использовать flexbox. Флекс лишь выехал на все браузеры кое будто размеренно, а здесь уже новоиспеченный грид подъехал)) благодарю для тебя огромное за видео, всех благ.
ПрО МаСтЕр 5 months ago
Очень уж Flex-box припоминает))