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

2315 ratings | 49793 views


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

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

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

WebDesign Master 2 months ago
Верстка реального макета с внедрением CSS Grid:
N S 1 month ago
Спасибо Алексей! Очень любопытно, понятно излагаете все свои мысли и внимать приятно, будто документалку на канале Discovery ))
Артем и Катерина 1 day ago
Terrific! Thank you!
Samvel Hayrapetyan 2 days ago
суперрррррррррррррррррррр, вы супер !!! а будто написать grid-template-columns: с auto-fill и 1fr 1fr 1fr ? то кушать желаю произнести без replace
LuckyGamerTV 3 days ago
@WebDesign Master, хороший денек, подскажите будто сделать чтоб в строке было очень 3 элемента, однако они поддерживали auto-fit , т.е. при сужении они выстраивались в столбик.
PropovedNik 4 days ago
а если немало колонок и понизу футер, то нужно строчить футер 8 один, чтоб он во всю ширину колонок был либо можно будто-то одним словом это показать?
Алексей Яранкин 5 days ago
Спасибо! Отличное видео! Интересно попросту, кто дизлайки такому контенту ставит?
alex nixon 11 days ago
20:08 отчего заместо ширины изменяются отступы???? minmax(60px,1fr) по идее должна изменяться ширина.
alex nixon 11 days ago
даже если на данный момент забежать на 1 образец и поставить grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); изменяется ширина, однако никак не отступы
Maxim Makow 15 days ago
Решил здесь не так давно подновить познания по Сss, и натолкнулся на это видео. Новые способности CSS Grid попросту супер! Давно я ожидал что-то подобного. Автору благодарю.
DrT1MA 24 days ago
лайк за Миллу)
Daniil_Angel 25 days ago
Очень информативно. А будто сделать что бы было 3 колонки по 1fr и что бы любой блок в этой всей сетке имел такую же высоту будто и ширину? Проще говоря, сетка из КВАДРАТОВ в 3 колонки
Денис Георгиевич 1 month ago
Все круто. Правда я дерево и не понимаю. Но весьма интереснр
Чити Васегаран 1 month ago
Шах и мат bootstrap!)
Даниил Голубятников 1 month ago
Пришлось похохотать, когда удаляли 5-ый элемент..)
Павел Пеников 1 month ago
Bootstrap идет лесом?
WebDesign Master 1 month ago
Нет.
Виталий Викторович 1 month ago
Спасибо! Очень животрепещущая информация на этот момент! Как ты лишь успеваешь за всем смотреть )
Санчо Пансо 1 month ago
Годный задание)
Friden Craw 1 month ago
Как именуется программка, которую ты используешь?
Alexandr Kokin 1 month ago
Благодарствую за контент
gearmobile 2 months ago
Круто! Преподавать - тоже необходимо уметь. У Вас это выходит, Алексей ))
sp 2 months ago
Технология то крутая, осталось лишь ожидать, восторгаться и уповают когда будет помощь с выше 95% А на этот момент flexbox у руля, для реальных проектов.
Myas noy 2 months ago
я вот думаю - кушать ли резон использовать в проекте технологию которая официально вышла лишь в середине 2к17?
WebDesign Master 2 months ago
Нет естественно. Я безустанно повторяю: на продакшен - лишь испытанные совместимые технологии. Пока что гриды - это наинтереснейшая разработка для исследования.
Anton Noginov 2 months ago
Привет Алексей. Скажи изволь а будет видео по новенькому sablimetext 3?
El Negro 2 months ago
Спасибо за видео, весьма наглядно, будем поглядеть.
Павел Бездорнов 2 months ago
Бро ты будешь мастерить обозрение Bootstrap?
Павел Бездорнов 2 months ago
4
Tre 2 months ago
Божечки боже, я ожидал этого 10 лет.
Vitaliy Bereza 2 months ago
ahuenno   😮
Makselio Buyakuri 2 months ago
попросту потрясающе!, благодарю
unistar42 2 months ago
Отличное видео, попросту и понятно всё. Жаль, что покамест что еще использовать невозможно - это в разы бы ускорило верстку. Но некоторое эмоция красивого во мне негодует: 1) нУжно , а не нужнО , 2) срЕдствами , а не средствАми. А в остальном всё волшебно. Моё вам благодарю и лайк. :)
Mitai 2 months ago
гриды это тот же флекс лишь облик с боку?
Amir J 2 months ago
css grid будто и bootstrap просит подключения? Я сообразил что дудки
WebDesign Master 2 months ago
Нет.
Vitaly Orlov 2 months ago
Очень круто и информативно. Спасибо большущее!
Amir J 2 months ago
Так выходит bootstrap уже отпадает?
WebDesign Master 2 months ago
Годика этак чрез 2-3 отпадёт ))
Chingiz Arziev 2 months ago
А можно попросить сделать маленький лэндинг с помощью Grid. Пожалуйста.
Илья Готвянский 2 months ago
Через какую программку он работает?(прописует код)
FrontEndUkraine 2 months ago
Очень интерестно ,ждем курс контента в этой теме!)))
ProodЪ First 2 months ago
27:23 зачет
Olexandr Coder 2 months ago
Мне будто css grid даже удобнее чем flexbox. Как лишь css grid станет нормально поддерживаться браузерами он очень урежет нишу фреймворков
KillerTime html-coder 2 months ago
афигеть круто :)
Суровые Будни 2 months ago
Хорошо объясняешь, благодарю1
AnnA Af 2 months ago
круто! и по мне дак проще флексов)) ну-ка это естественно же персонально
arhhi 2 months ago
Короче, трудиться можно приступить года чрез 3
Arcanennik 2 months ago
Думаю за этим будущее. Лет чрез 5 все этак верстать будут, а года чрез 2 уже будут такие заказы.
Александр Tochcha 2 months ago
bootstrap 4 отменяется? )
Станислав Волохов 2 months ago
удивительно что заместо того чтобы добавить флексам костыль auto-fit , создается новоиспеченный способ с новым заглавием и синтаксисом и собственной совместимостью
Krot TV 2 months ago
Приятно на это глядеть) Продолжайте этак далее. Рассказывайте про новые и крутые технологии, это весьма любопытно. Спасибо.
Олег Балтаг 2 months ago
Не знаю что здесь сложного, все попросту и достаточно интуитивно. Скорей бы все браузеры начали поддерживать, а то задолбало.
Dmitry Popov 2 months ago
С 5м элементом было внезапно) благодарю за материал
Игорь Лукьянов 2 months ago
в grid-gap можно устанавливать 2-а значения ------ grid-gap: 20рх(по вертикали ) 10рх(по горизонтали) ;
Aleksandr Krichevcov 2 months ago
Офигеть! Шикарнейший прибор! Спасибо за обозрение.))
Eleleman 2 months ago
Cruta spasibo za urok 😊👍
gfreemankz 2 months ago
Причем здесь Мила Евович?:)
WebDesign Master 2 months ago
Потому, что пришлось выслать 5-ый элемент без её ведома.
Alex Star 2 months ago
Уже можно их использовать?!)))
Vladimir Ishchenko 2 months ago
Большое благодарю за задание)
Саша Александров 2 months ago
Отличный задание, я для закрепления материала могу порекомендовать cssgridgarden.com , надеюсь создатель не удалит полезную ссылку)
Алексей Мельничук 2 months ago
Еще от того же создателя, однако уже по флексам
Максим Мещеряков 2 months ago
Класс, класс! Это точно будущее! Спасибо Алексей!
Роман Предеин 2 months ago
Спасибо за видео! Очень любопытно.
creat vav 2 months ago
YouDo это твой проект ? )
Daniel Hell 2 months ago
Лайк! Побольше бы схожих уроков.
Диванный Эксперт 2 months ago
ребзя, учим на данный момент, пользуем где позволяют либо для себя. Зато когда выстрелит будем уже во все орудия)) а оно выстрелит ибо хайп стоит обычный)
Billie Willie 2 months ago
Вообще неясно отчего гриды уже удостоились вашего внимания, а флексы ещё дудки
Kukushioku 2 months ago
WebDesign Master видео по флексу в вашем выполнении было бы круто. Хотя бы в таком же формате будто и данное видео
WebDesign Master 2 months ago
Посмотрим.
Billie Willie 2 months ago
В целом я написал коммент, чтоб побудить сбросить вас ролик про уже пришедшую технологию - флексбоксы. Думаю это будет бомба)
WebDesign Master 2 months ago
Потому, что Флекс уровня блоков по собственному природному предназначению и они посредственны. Гриды - степень итого лейаута и это круто.
Диванный Эксперт 2 months ago
гриды хайпанули и на волне хайпа их способности обозревает всё больше и больше людей. а флексы негромко появились, будто-то не сходу начали поддерживаться и хз) может я попросту не этак издавна в теме, лишь год+- учусь\смотрю и будто-то резко скакнуло с верстаем по флоатам до ждём гридов, они круты ) хотя исследовал и пользую флексы, они комфортны. Да и уверен, они останутся. будут на уровне апнутых инлайн-блоков) это не взаимоисключающие технологии) ps эт моё мировоззрение, может оно и верное, мож дудки)
Yaroslav Akulov 2 months ago
Лайк, кто из LF 😎
Happy 33white 2 months ago
Мне будто я слышу будто извилины в голове тягают телеги с информацией))
Доспехи Блоггера 2 months ago
Круто! Спасибо для тебя огромное! Как вечно ценная информация!
The Single Signal 2 months ago
Какой текстовый редактор?
Диванный Эксперт 2 months ago
ну-ка гласили же, кодепен это. codepen.io либо будто-то этак
K Dmitry 2 months ago
Тоже любопытно, что за текстовый педактор либо это on-line сервис?
Давид Бабучаишвили 2 months ago
Простите за неведение либо тупоумный проблема. Но что за окружение была в этом лицезрел и можно ли с ее помощью мастерить веб-сайты?
alex las 2 months ago
Давид Бабучаишвили codepen
LIQUID Zone 2 months ago
. play and enjoy :)
Game channel 2 months ago
По контенту вопросов дудки, однако вот пикселов , не могу расслабленно глядеть) А GRID этак вообщем волшебство, немало места и времени сберегает) P.S. Редактирую коммент уже 3-ий один (в процессе просмотра). Блииин, grid такая бомбезная предмет! Смотрю и не могу нарадоваться, сколько способностей))) Спасибо разработчикам, что сделали; и благодарю создателю, что показал нам!
Олександр Ходорівський 2 months ago
Ни Эдж, ни ИЕ10 такового не поддерживают ) мелкомягких необходимо лопатой по головушке ударить чтобы сделали нормально обновляемые браузеры )
Duoxx 1 month ago
партиальная помощь
Дмитрий Бобков 2 months ago
Да, пора наверное поглубже начинать учить гриды, ибо и истина за ними будущее. Спасибо Алексей, всё будто вечно на высшем уровне!
Пдс Закиров 2 months ago
охуеть чудеса, это означает что фреймов не будет под типа бутстрап, конечно еще и любой школьник сумеет такое мастерить
ololo ololo 2 months ago
Не успел еще флексы освоить,а здесь уже гриды подъехали. Эх,будто стремительно всё развивается.
Диванный Эксперт 2 months ago
++ за год исследования вёрстки успел поучить флоаты, бутстрап3, jquery, флексы. из этого, по сущности, лишь флексы далее необходимы, остальное погибает либо уже там) будто гласил кто-то в коментах, при опыте в немало лет фронтом - это курс принуждает тебя вечно обучаться, многие не выдерживают и конкретно из-за этого уходят в бекэнд) однако отчего этого никто не гласит в начале пути, что б обдумывать в какой омут прыгаешь. однако блин, всё равно любопытно))
Vladimir Chernov 2 months ago
Мощный прибор, это трудно опровергать, однако и сложность его внедрения сравнима. ИМХО, хорошо написанная в один прекрасный момент(!) сетка на flexbox может накрыть бОльшую доля функционала гридов (а если гласить про реальные кейсы на продакшн -- то вообщем полный), при этом отпадает нужда повсевременно дописывать стили чрез @media, а управление поведением осуществляется классами. Если в проекте шаблоны правильно выделены в отдельные файлы (к примеру, применяется штамп проектирования MVC), то залезть в штамп и дописать/прибрать одинешенек класс куда проще, чем строчить целое правило в стилях. Вывод: даже если представить, что все браузеры уже на данный момент поддерживают технологию гридов, использовать их необходимо лишь в том случае, если ты весьма отлично понимаешь что делаешь, и для чего это необходимо. Пока что я не вижу ни одной предпосылки переезжать с flexbox-сеток на гриды. Поправьте, если не прав.
German Viktorovich 2 days ago
какая сложность, здесь из тегов резвее чем в фотошепе штамп собирается, попросту офигенно
Vladimir Chernov 2 months ago
большущее благодарю за ссылку. стало еще понятнее, в чём красота использования гридов. попробую будто-нибудь на новеньком проекте.
John Smith 2 months ago
если не стращает британский то здесь( ) дан хороший ответ на проблема для чего необходимы гриды
Ivan Anufriev 2 months ago
А можно сделать на CSS Grid подобие Masonry ? думаю многим будет здорово. С почтением, ваш подписчик.
John Smith 2 months ago
с grid-auto-flow dense можно поиграться
Александр Tochcha 2 months ago
а по-моему, будто один типа masonry сделать невозможно
Макс Шмася 2 months ago
На протяжении итого видео создатель указывает будто это сделать, и ты спрашиваешь можно ли этак сделать? =/
ПрО МаСтЕр 2 months ago
Алексей, Вы будто вечно наилучший!!! Ставить урокам Алексея Мне не понравилось - это все равно что плевать в тарелку с пищей, которая тебя кормит! Шли бы лучше крестиком вышивать!
MoonMoon 2 months ago
лайк, однако не пикселов, а пикселей, не?
Play Hard 2 months ago
Ааааахах мой мозг! Это круто естественно, однако покамест актуальнее использовать flexbox. Флекс лишь выехал на все браузеры кое будто размеренно, а здесь уже новоиспеченный грид подъехал)) благодарю для тебя огромное за видео, всех благ.
ПрО МаСтЕр 2 months ago
Очень уж Flex-box припоминает))
WEBMAKS 2 months ago
Супер! Keep up the good job!!!
Денис Каракчиев 2 months ago
а сейчас проблема: стоит ли использовать bootstrap 4 при наличии css grid?
John Smith 2 months ago
Диванный Эксперт, в 4ке гриды на флексах реализованы, foundation с xy гридами поинтереснее смотрится, вообщем удивительно что bootstrap популярнее стал
Диванный Эксперт 2 months ago
они ж там вроде должны были гриды поддерживать, не удалось?)) либо я что-то перепутал. может тогда новейшую версию выпустят когда все начнут поддерживать гриды
Канал #1329147 2 months ago
Ипать, я в истории.
Странный Контент От SMKa 2 months ago
Наконец то, а то bootstrap уже начал нервировать
Самат Калауов 2 months ago
будущее за этим свойством
Mikhail Levchenko 2 months ago
Улет!!! Спасибо огромное! Вы на Маке работаете? Мне показалось, что данное видео с ноутбука
John Smith 2 months ago
мак ос не лишь на ноутбуках бывает)
Михаил Завалко 2 months ago
Леша будто вечно молодчина, самый нужный контент! 👍
Роман Белов 2 months ago
*Продолжай снимать уроки по сетке!*
Павел Бездорнов 2 months ago
Ну все bootstrap не нужен, css grid смотрится будто доработанный flex-box(какой сейчас тоде не нужен). Думаю в близжайшее пора начну верстать на нем, нужно еще потерпеть пару месяцев.
sepa rated 2 months ago
А можно проблема, в какой он программке работает?
Andrei Gunderin 2 months ago
Павел Бездорнов 2 months ago
Code open веб сервис
Роман Белов 2 months ago
*то, что необходимо) а бутстрап можно бросить в качестве украшательств)*
M 2 months ago
Подскажи плз, какую сетку отрисовывать под грид? По суте, какую хочешь, и эталона больше дудки?) Или та же бутстрап сетка подойдет? Было бы любопытно поглядеть дизайн+верстка под грид от тебя, с необычной сетью)
WebDesign Master 2 months ago
Любую. Абсолютно. Можно и 12-ти колоночную использовать, будто в Bootstrap. Если этак удобнее.
Nneal 2 months ago
Как ты на 5:50 сделал сходу 3 курсора ввода текста?
Nneal 2 months ago
Олег Будкеев Спасибо огромное
Олег Будкеев 2 months ago
Множественные курсоры будто Sublime Text. Достаточна зажать Ctrl, когда ставишь курсор в хотимое пункт
Коваль Максим 2 months ago
Давно ожидал от вас этого видео
fortimo.su 2 months ago
Я попросту в экстазе. Наконец-то возникает то, что необходимо было уже несколько лет вспять. Я даже будто-то задумывался о том, что браузеры должны поддерживать некоторый образ умственных сеток. Но разработчикам браузеров этак тяжело договариваться меж собой, что пора уже их время от времени лупить лопатой по голове, чтоб сговорчивей были. Спасибо и всех для тебя благ.
Диванный Эксперт 2 months ago
если начнёте лупить, то за меня IE'шникам излишний один лупаните)) а вообщем лупить необходимо не лишь разработчиков, однако и некие компании, которые ПО не обновляют со времён революции и приходится веб-сайты мастерить под IE 8 даж, благо не мне. вот в данном случае я рад, что не дорос ))
Дмитрий Ткаченко 2 months ago
Видео новое, а материал всюду однообразный по Grid сетке. Другое дело забабахать веб-сайт использую сетку Grid и флекс бокс. Надеюсь такое видео либо серия уроков будут т.к. всюду поверхностно говорят и одно и тоже. По сущности потом просмотра видео уже можно лупить в бюст и произнести я знаю эту плюшку, однако на самом деле не этак)) аспектов то немало и их можно открыть если другие не открывают. За видео лойс)
Дмитрий Ткаченко 2 months ago
На шаг спереди. Реальных примеров верстки веб-сайтов с Grid сетью практически дудки хотя это золотая жила этак произнести. Успехов в уроках и естественно же ждём их.
WebDesign Master 2 months ago
Это тема 1-го из последующих уроков. На реальном примере.
Александр Здоров 2 months ago
весьма высококачественная подача материала, проблема в последующем: стоит ли на данный момент, к примеру, запоминать эти характеристики и характеристики, и ожидать покамест показаться большая поддерживаемость либо прибывать к нему когда будет больше поддержки, и может быть, поменяется подход? не будет ли будто с bootstrap4 какой 3 раза переписали
VADIK CSGO 2 months ago
В каком редакторе на видео делается все это?
Holy krivenkop 2 months ago
codepen - онлайн редактор
Александр Здоров 2 months ago
это не совершенно редактор, сервис:
1990Mrak1990 2 months ago
Отличное видео! А можно сделать такое же, по flexbox?
Duoxx 1 month ago
У сафари уебанская валидация форм
mr. Max 2 months ago
Как у меня пылает от Safari, нескончаемые яблоковые трудности
Pavel Kyzieiev 2 months ago
SHRTCU нафига для тебя это, когда кушать флексбоксы, у которых 97% помощь браузеров, синтаксис в 2 раза проще и бескрайние способности
Dmitriy 2 months ago
flexbox в отличии от этой технологии поддерживается большинством браузеров
SHRTCU 2 months ago
1990Mrak1990 нафига для тебя флекс когда кушать это?
Андрей Борисов 2 months ago
Один из немногих каналов на котором у меня оповещения стоят, лойс не смотря!
No null 17 days ago
под каждым виде она ютубе кушать таковой комментарий.
Ольга Ветер 2 months ago
Спасибо, огромное! Как бы еще настроиться думать гридами.
Alex Twix 2 months ago
Говорят, на исходном шаге обучения верстке, необходимо воспользоваться лишь стандартными средствами, никаких bootstrap, flexbox и тд. Так ли это ?
Alex Twix 2 months ago
WebDesign Master открой изволь свою школу, я, если что, 1-ый в очереди на обучение !
Kirill Miolinir 2 months ago
этак либо по другому flexbox - стандартное свойство css, которое на данный момент поддерживается довольно отлично
WebDesign Master 2 months ago
Не знаю, где и что молвят, однако в первую очередность необходимо выучить базы.
Денис Марченко 2 months ago
Уже ведь издавна существует grid, однако помощь до сих пор низкая(покамест 72.5%)
WebDesign Master 2 months ago
Существует издавна, работает без флагов совершенно не так давно. Поэтому будто-то этак.