Полный гайд по CSS Grid: адаптивная верстка за пару минут
Переглядів 256,706
5 років томуНовый взгляд на создание адаптивных красивых сайтов - CSS Grid. В ходе этого видео мы научимся работать с CSS Grid, разберемся что это такое и поймем почему это круче FlexBox!
1) Урок по FlexBox: • Flexbox CSS3 в одном в...
2) Плагин Emmet: • Пишем код быстро благо...
3) Урок на сайте itProger: itproger.com/news/119
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #GoshaDudar 👨🏼💻
- Все уроки по хештегу #GoshaLessons
@user-ed1dg9vm1y 5 років тому
Гоша, спасибо тебе огромное за твой труд! Бесценно! Удачи тебе, и делись и дальше своим опытом и актуальным материалом - несомненно, тебе вернётся в разы больше!
@maga___3814 4 роки тому
тоесть я, 2 часа мучался с div и float: left, а тут все настолько просто?!
@NaShSoundS 4 роки тому
Это проще даже чем с флексами, а ты брат и правда гаверное намучался :D
@user-gl9gi6vk7k 4 роки тому
Техника дошла)) Эх раньше верстка таблицами))
@mediontamginskii5889 4 роки тому
У кого то вообще 15летние шрамы от table-ов еще не зажили а тут такое)))
@aleksforsidaev156 4 роки тому
Просто, но шаблонно, не уникальный дизайн.
@ilovesnoopyguy 4 роки тому
Сам в ахуе!!!!
@user-ge7wj1df5k 3 роки тому
Просто красавчик. Не жует, не мямлит, не тянет кота за усы. Большая вам благодарность сударь
@h1t262 5 років тому
Шок, как же ты объясняешь прекрасно, спасибо!)
@user-gk3ke7dx2x 3 роки тому
Гоша как всегда самый реальный чел. Просто, доступно, без воды, молодец!
@wigety3413 5 років тому
Георгий, выражаю Вам благодарность за этот потрясающий урок.
@Anna_Rudova 5 років тому
Спасибо за труд! Всё понятно и при этом сжато.
@ppagocmbb 4 роки тому
Очень просто и понятно объясняешь,спасибо.А то я читал.читал ,весь мозг выкипел и ничего не понял.А тут посмотрел и сразу всё понятно стало =)
@user-tp8sn6ps2l 4 роки тому
спасибо огромное, очень понятно и доступно всё объяснил👍
@desys. 5 років тому
Очень качественный контент, браво! Аплодирую стоя =)
@Yanex-ei3mx 2 роки тому
Вау! Спасибо огромное !!! Все так понятно и доступно❤️
@mariia6820 5 років тому
спасибо тебе огромное ,за 25 мин есть все что нужно для основного понимания и умения!
@kukusikibabasikitv 3 роки тому
Это божественно!! На одном дыхании зашло!
@XiongMaooo 5 років тому
Огромное спасибо, очень классный урок!
@ANONYMOUS-gk3qs 2 роки тому
Спасибо! Все очень круто и просто! Решил заново пройти гриды и в добрый путь к Реакту))
@AK-it4nk 5 років тому
Гоша, отличный видос!
@TheBigChannel_ Рік тому
Спасибо большое за ваш труд 🙏🏻
@shlepanovan 4 роки тому
Умопомрачительно! Супер сетки. Теперь главное чтобы хватило человеку фантазии как все эти блоки перемешивать
@vladyslavkozanchyn7463 2 роки тому
Хороший урок, четко по существу и наглядно. Что бы не листать куча документации и сравнивать тут сразу всё ясно.
@masterphp 4 роки тому
Давай ещё ) Красавчик!
@alexgrigoriev7133 5 років тому
Спасибо за урок)
@sergejg4773 Рік тому
Гоша блогодарочка за видосик !
@oleksandr_mykhailov 3 роки тому
Очень круто, спасибо
@someoneneverknown1120 5 років тому
Отличный видос, Гош. Лайк без вопросов.
@montenote 2 роки тому
Спасибо. Всё доступно
@ravabat5841 5 років тому
Гоша я у тебя очень многому научился, все уроки у тебя на одном дыхании без лишней воды! Здоровья тебе и процветания в твоих делах! Благодарю, ставлю лайк, а подписан на канал я уже давно)
@vladimirhhhh 4 роки тому
Rava Bat согласен Идеальные уроки
@ltdsci2171 3 роки тому
а ты английский поучи, может, тогда переводчики не понадобятся... вот, например, самый популярный канал, откуда десятки таких Гош тупо тянут и переводят контент, не знаю как это с т.з. прав, наверное никак.... ukposts.info/have/v-deo/ooZpdmhrqYl_lqM.html
@user-jj3zm1jx7z 3 роки тому
@@ltdsci2171 демн ман ай сов ит
@wylezav5064 2 роки тому
Не,нихуя одна нудятина которая почти нихуя не даст
@XopoLLIee_NMR 10 місяців тому
@@ltdsci2171 уж лучше так у гоши смотреть, чем у какого то американца. Да и тем более на родном языке, а это гораздо лучше
@lackevil3730 4 роки тому
Лучший! Спасибо большое!
@yaroslavzef7267 4 роки тому
Гошан вообще от души!
@coldy7382 4 роки тому
Супер, спасибо большое за объяснение
@user-jx3jw8lf9p 5 років тому
смотрю это в рамке плейлиста по цсс и должен заметить, что время положительно влияет на качество и подачу материала в твоих уроках
@dimka3628 3 роки тому
Спасибо,ясно и понятно.Респект
@laboptyka3706 3 роки тому
Гоша ты Лучший!!! Спасибо огромное :)
@user-fc8yp7jf9v Рік тому
Автор, большое тебе спасибо за урок. Гриды действительно упрощают процесс написания сайта. Теперь буду их использовать в своих проектах.
@yuriikryvych4824 3 роки тому
блин СПАСИБО МУЖИК ! ясно и доступно
@user-gk3ke7dx2x 5 років тому
видео - бомба!!! Гоша как всегда рулит!
@lowator 2 роки тому
большое спасибо за видео! чудесный гайд, все понятно и наглядно :) хотя про линии было чуть-чуть тяжело понять, думаю, анимация поверх примера придала бы информативности. когда третий блок поменялся местами с четвертым я вообще выпала :D наложение блоков тоже впечатляет. сетки рулят!
@user-pc5sr2sg7x Рік тому
великолепно, спасибо!
@karenkostandyan5672 5 років тому
лайк за видос.
@pipa-pg7kp 6 місяців тому
Спасибо за ликбез! Полезно!
@user-bi8ez7xf2d 2 роки тому
Честно говоря, просто здорово.
@user-ch6ot6bc8q 8 місяців тому
Спасибо большое за ролик, очень сильно помог решить проблему с картинками!
@Alex_shellexecute 2 роки тому
Молодца мужик ) долго искал того кто расскажет что то нормально )
@fnaticshy 3 роки тому
понятный и эффективный гайд по гридам, ставлю лукаса
@user-qu4tf1nm4c 3 роки тому
СПАСИБО!!! Grid-супер тема!!!!
@_Fantom_. 5 років тому
Отличный урок! Думал, что flex-box это лучшее, что есть в верстке, но оказывается, есть еще лучше...
@5555Elenka 2 роки тому
С Новым годом ! Спасибо за уроки )🤗❄☃🎄🎆🎉🎅
@gogo-jr3im Рік тому
Спасибо большое!
@fathers_stories 2 місяці тому
спасибо! разобрался с твоей помощью
@user-ty7su3qg4z Рік тому
спасибо бро, сразу стало понятно, подписка)))
@mikesheva3 5 років тому
Красавчик!
@velialhero5632 5 років тому
Спасибо за урок
@tavsheng 4 роки тому
Спасибо. Понял всё.
@WalterWhite-ck5rz 3 роки тому
Спасибо! :)
@user-to4ke3df3v 3 роки тому
Спасибо огромное!
@user-lb7ff9iy9s 5 років тому
Интересный урок, хочу еще !!!
@ivkis3270 5 років тому
Ооо, вот это тема)
@Anshegar 3 роки тому
Ай дарагой спасибо тебе, отличная система эти сетки думаю в паре с бутстрапом можно будет создавать реально потрясные вещи.
@StigmatedGray 5 років тому
Спасибо!
@gameforgame3268 4 роки тому
спасибо разобрался я думал это сложно
@rmnkot 5 років тому
Видео хороше, про grid area еще надо добавить
@user-ls2en2mb4c 4 роки тому
developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout Тут тоже хороший материал от Mozilla. Прочитай эту статью и закрепи материал игрой Grid Garden: cssgridgarden.com/
@SergeyBobrov240 4 роки тому
@@user-ls2en2mb4c Спасибо, годная информация!
@user-on8jd7tk3t 2 роки тому
огромное спасибо😁😁👨💻
@samborsky_pro 4 роки тому
СУПЕР!!!!!!!!!!!!!!!!
@STRIPPEDSTAR 4 роки тому
Спасибо 🙏
@ivanb6062 3 місяці тому
Оооо! 5 лет назад! Как летит время... и технологии! Хороший урок по Гридам, всё отлично разжевал. Только я искал Адаптив на гриде (под разрешение смартфона), но ответа не получил. Будем искать...
@wtf_mlbb2663 2 роки тому
я получил очень хорошые знания спасибо большое
@stonesutd 5 років тому
Вполне подробный обзор 👌 Ждем полной поддержки браузерами
@diterbolen9301 5 років тому
она уже давно есть во всех современных браузерах
@TheWolf2300 5 років тому
Это просто ахринительно удобно... думаю через пару лет все перейдут на грид. Круто, спасибо за гайд)
@iDobroslavin 5 років тому
Уже на работу в Москве только с такими навыками верстальщиков ищут.
@user-ge9qx8fq9m 4 роки тому
Вообщето все сайты которые вы скачиваете с инета то у всех grid ( bootstrap)
@user-ge9qx8fq9m 4 роки тому
Иностраные програмисты уже давно используют bootsrtip grid И это было еще 2017 г если я не ошибаюсь
@user-ge9qx8fq9m 4 роки тому
Мужик о чем ты вообще? Ты пишеш что flex нету justify-items Хотя автор говорил не о flex а о grid И нассет bootsrtap это свободный набор инструментов для создания сайтов итд
@user-ge9qx8fq9m 4 роки тому
А во торых да я немного псих но какой же ты после этого грубый человек .
@sevakvart1111 4 роки тому
Очень полезный урок, 5+
@user-py7hm2mx7o Рік тому
Хорошо😊
@myratsaryyev7953 5 років тому
спасибо давно искал русскую версию
@vladimirww5152 3 роки тому
Очень полезно!
@user-sr6vq2fk6u 2 роки тому
Крутое видео
@sergeykomarovsky3524 5 років тому
Хороший урок. Прогрессивная технология, за ней будущее. Код более компактный и фактически конструктор.
@8wave 5 років тому
"Что мы можем с вами делать? А вот что мы можем делать с вами." Невольно вспоминается Виталий Кличко с его словесными перлами :)
@marshmylow7413 2 роки тому
Не очень понял как работает grid-row по долям, как будто бы всегда нужно вычитать одну строку из значений, которые мы пишем. Но все равно супер, так легко и понятно и наглядно все показано. Благодарю!
@alekseevich_psk 2 роки тому
Збс!
@MrSemyon87 5 років тому
Отличное видео! Хорошая замена Bootstrap.
@Arjunarjunskiy 2 роки тому
Margin читается как марджин, items как айтэмз. Но вообще спасибо за видео. Годное!
@user-qi8ws2se1z 3 роки тому
клевое объяснение
@evgenika7472 2 роки тому
Спасибо
@ynivermine7750 4 роки тому
кул спасибо большое ))
@logand5408 3 роки тому
Я по началу хотел примеры, а уже к середине всё понял)
@bestviners3383 4 роки тому
сульно,и круто ))
@StPaaty 5 років тому
красавчик! охуенно объяснил!
@konstantino7016 4 роки тому
Супер! Супер! Супер! Огромное спасибо за понятное и простое разъяснение!
@MegaOooleg 2 роки тому
Только неделю учу все эти html u css и уже понимаю что мне нафиг не надо вникать сильно в эти table с их ячейками)) Спс очень полезное видео
@pavelb5410 Рік тому
Ну таблицы как бы остаются актуальными для представления информации в табличном виде.
@mr_Multitask 2 роки тому
Гоша, большое спасибо за подробное видео!!! Очень помогло!!! А что если у меня текста много в фиксированном блоке и я не хочу чтобы блок расстягивался. Как сделать скролл текста в фиксированном по ширине и высоте блоке?
@user-rw6vc4wt1q 5 років тому
Довольно интересная штука, спасибо! Очень удобно работать с ней.
@modultre 3 роки тому
super
@awenn2015 5 років тому
Забыл рассказать про grid-templace-area , где можно в несколько строк указывать сколько fr занимают и сколько по высоте будут , хотя может я что-то и путаю
@homeuser3108 5 років тому
20:50 1.Почему grid-row:1/2 - это его же позиция, а не 1/1? 2.Почему grid-column:1/2 не работает? Даже если во враппере указать grid-template-columns вместо значения "1fr 2fr1fr" значение "1fr 1fr 1fr 1fr"? 3.Почему получается так, что для горизонтали при grid-column: 1/3 блок заполняет собой 3 колонки/фракции/доли/типоразмера по горизонтали, а для вертикали при grid-row:1/3 блок заполняет собой только 2 строки? В общем, шаг влево, шаг вправо - одни непонятки, которые в видосике тактично обойдены)))
@user-ge9qx8fq9m 4 роки тому
Согласен я них не понял как использовать 😂
@user-ge9qx8fq9m 4 роки тому
Нужно смотреть дальше разные видео с других коналов ятобы понять я так думаюбудет более понятно потому что где то автор мог забыть что то где то просто не дораскозать
@yahyo5452 2 роки тому
спс
@cameron2505 9 місяців тому
Гоша, молодцом! Палец вверх и я абонирую твой канал. Ты мне здорово помог, родной.
@ngc_657 2 роки тому
CSS Grid идеально подходит для вёрстки сайта табличного макета
@BagaevRoman 3 роки тому
Гоша, огромное тебе спасибо! Я почему-то отписался от твоего канала, так как долго не заходил, а тут снова понадобилось и снова твой канал. Все теперь подписка постоянная. По видео: очень внятно и очень быстро (в хорошем значении контекста этого слова) объяснил практически все возможности, что мне необходимы для решения своей задачи. Супер!
@pavelk3536 5 років тому
А правильно ли указывать значение фракций в процентах? Вместо 1fr 2fr 1fr указать 25fr 50fr 25fr (проценты записаны в виде fr)
@arturatshemyan724 4 роки тому
Class.
@FactorySteel 3 роки тому
Подскажите, как Гридами без медиа-запосов сделать так, чтобы 2 блока сначала переносились на новую строчку, а потом резинились в минимум?
@user-fs9th3sr9g 3 роки тому
Гоша, а что лучше Grid или FlexBox ?
@p_levin 5 років тому
удачи вам в ie :)
@NyadesCh 5 років тому
Павел Левин он устарел, какой смысл писать под него сайты
@zerxa 5 років тому
Умные люди под IE ничего кроме рамки "обнови свой брайзер" не делают ;-)
@yuliyamassett9356 5 років тому
Flexbox и Grid одинаково поддерживаются в IE.
@woofiwo6136 5 років тому
Во многих странах ещё IE используется, и довольно таки хорошо. Но начиная с 9й версии. Поэтому придержите такие заявления!
@Deonok 5 років тому
Woofi Wo во многих странах? довольно таки хорошо? ахахаха) по рунету 1.68% и глобально 3.89% пользователей юзают невероятно удобный и прогрессирующий IE
ВебКадеми | Юрий Ключевский
Переглядів 96 тис.
Фрілансер по життю
Переглядів 366 тис.
Pro Web
Переглядів 14 тис.
ВебКадеми | Юрий Ключевский
Переглядів 10 тис.