Полный гайд по CSS Grid: адаптивная верстка за пару минут

Подписаться 888 тыс.

Просмотров 260 тыс.

50% 1

Новый взгляд на создание адаптивных красивых сайтов - CSS Grid. В ходе этого видео мы научимся работать с CSS Grid, разберемся что это такое и поймем почему это круче FlexBox!
1) Урок по FlexBox: • Flexbox CSS3 в одном в...
2) Плагин Emmet: • Пишем код быстро благо...
3) Урок на сайте itProger: itproger.com/n...
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Instagram: / gosha_dudar
Telegram: t.me/itProger_o...
Twitter - / goshadudar
- Уроки от #GoshaDudar 👨🏼‍💻
- Все уроки по хештегу #GoshaLessons

Опубликовано:

26 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 276

@ravabat5841 5 лет назад

Гоша я у тебя очень многому научился, все уроки у тебя на одном дыхании без лишней воды! Здоровья тебе и процветания в твоих делах! Благодарю, ставлю лайк, а подписан на канал я уже давно)

@vladimirhhhh 4 года назад

Rava Bat согласен Идеальные уроки

@ltdsci2171 4 года назад

а ты английский поучи, может, тогда переводчики не понадобятся... вот, например, самый популярный канал, откуда десятки таких Гош тупо тянут и переводят контент, не знаю как это с т.з. прав, наверное никак.... ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-jV8B24rSN5o.html

@wylezav5064 3 года назад

Не,нихуя одна нудятина которая почти нихуя не даст

@XopoLLIee_NMR Год назад

@@ltdsci2171 уж лучше так у гоши смотреть, чем у какого то американца. Да и тем более на родном языке, а это гораздо лучше

@ПётрПетрович-х6ш 5 лет назад

Гоша, спасибо тебе огромное за твой труд! Бесценно! Удачи тебе, и делись и дальше своим опытом и актуальным материалом - несомненно, тебе вернётся в разы больше!

@МишаАстахов-ю2д 3 года назад

Гоша как всегда самый реальный чел. Просто, доступно, без воды, молодец!

@ppagocmbb 5 лет назад

Очень просто и понятно объясняешь,спасибо.А то я читал.читал ,весь мозг выкипел и ничего не понял.А тут посмотрел и сразу всё понятно стало =)

@wigety3413 6 лет назад

Георгий, выражаю Вам благодарность за этот потрясающий урок.

@shlepanovan 5 лет назад

Умопомрачительно! Супер сетки. Теперь главное чтобы хватило человеку фантазии как все эти блоки перемешивать

@ANONYMOUS-gk3qs 2 года назад

Спасибо! Все очень круто и просто! Решил заново пройти гриды и в добрый путь к Реакту))

@h1t262 5 лет назад

Шок, как же ты объясняешь прекрасно, спасибо!)

@rmnkot 6 лет назад

Видео хороше, про grid area еще надо добавить

@UltraFemboy-f1l 5 лет назад

developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout Тут тоже хороший материал от Mozilla. Прочитай эту статью и закрепи материал игрой Grid Garden: cssgridgarden.com/

@SergeyBobrov240 4 года назад

@@UltraFemboy-f1l Спасибо, годная информация!

@Alex_shellexecute 2 года назад

Молодца мужик ) долго искал того кто расскажет что то нормально )

@АндрейАнтонюк-ю8я 2 года назад

Автор, большое тебе спасибо за урок. Гриды действительно упрощают процесс написания сайта. Теперь буду их использовать в своих проектах.

@_Fantom_. 5 лет назад

Отличный урок! Думал, что flex-box это лучшее, что есть в верстке, но оказывается, есть еще лучше...

@marshmylow7413 3 года назад

Не очень понял как работает grid-row по долям, как будто бы всегда нужно вычитать одну строку из значений, которые мы пишем. Но все равно супер, так легко и понятно и наглядно все показано. Благодарю!

@TheWolf2300 5 лет назад

Это просто ахринительно удобно... думаю через пару лет все перейдут на грид. Круто, спасибо за гайд)

@iDobroslavin 5 лет назад

Уже на работу в Москве только с такими навыками верстальщиков ищут.

@закадром-р3п 5 лет назад

Вообщето все сайты которые вы скачиваете с инета то у всех grid ( bootstrap)

@закадром-р3п 5 лет назад

Иностраные програмисты уже давно используют bootsrtip grid И это было еще 2017 г если я не ошибаюсь

@закадром-р3п 5 лет назад

Мужик о чем ты вообще? Ты пишеш что flex нету justify-items Хотя автор говорил не о flex а о grid И нассет bootsrtap это свободный набор инструментов для создания сайтов итд

@закадром-р3п 5 лет назад

А во торых да я немного псих но какой же ты после этого грубый человек .

@kukusikibabasikitv 3 года назад

Это божественно!! На одном дыхании зашло!

@ЮрийПетрович-у8в 3 года назад

Честно говоря, просто здорово.

@ivanb6062 8 месяцев назад

Оооо! 5 лет назад! Как летит время... и технологии! Хороший урок по Гридам, всё отлично разжевал. Только я искал Адаптив на гриде (под разрешение смартфона), но ответа не получил. Будем искать...

@sergejg4773 2 года назад

Гоша блогодарочка за видосик !

@yaroslavzef7267 5 лет назад

Гошан вообще от души!

@laboptyka3706 4 года назад

Гоша ты Лучший!!! Спасибо огромное :)

@mariia6820 5 лет назад

спасибо тебе огромное ,за 25 мин есть все что нужно для основного понимания и умения!

@Anna_Rudova 5 лет назад

Спасибо за труд! Всё понятно и при этом сжато.

@МишаАстахов-ю2д 5 лет назад

видео - бомба!!! Гоша как всегда рулит!

@АрийяРоботов 5 лет назад

спасибо огромное, очень понятно и доступно всё объяснил👍

@MegaOooleg 3 года назад

Только неделю учу все эти html u css и уже понимаю что мне нафиг не надо вникать сильно в эти table с их ячейками)) Спс очень полезное видео

@5555Elenka 2 года назад

С Новым годом ! Спасибо за уроки )🤗❄☃🎄🎆🎉🎅

@pipa-pg7kp 11 месяцев назад

Спасибо за ликбез! Полезно!

@lowator 2 года назад

большое спасибо за видео! чудесный гайд, все понятно и наглядно :) хотя про линии было чуть-чуть тяжело понять, думаю, анимация поверх примера придала бы информативности. когда третий блок поменялся местами с четвертым я вообще выпала :D наложение блоков тоже впечатляет. сетки рулят!

@АлексейЛызлов-е1щ Год назад

Спасибо большое за ролик, очень сильно помог решить проблему с картинками!

@Anshegar 3 года назад

Ай дарагой спасибо тебе, отличная система эти сетки думаю в паре с бутстрапом можно будет создавать реально потрясные вещи.

@yuriikryvych4824 4 года назад

блин СПАСИБО МУЖИК ! ясно и доступно

@fnaticshy 4 года назад

понятный и эффективный гайд по гридам, ставлю лукаса

@ВисловичВладимир 6 лет назад

смотрю это в рамке плейлиста по цсс и должен заметить, что время положительно влияет на качество и подачу материала в твоих уроках

@Yanex-ei3mx 2 года назад

Вау! Спасибо огромное !!! Все так понятно и доступно❤️

@Arjunarjunskiy 3 года назад

Margin читается как марджин, items как айтэмз. Но вообще спасибо за видео. Годное!

@desys. 6 лет назад

Очень качественный контент, браво! Аплодирую стоя =)

@ДмитрийВолодько-г7д Год назад

спасибо бро, сразу стало понятно, подписка)))

@8wave 5 лет назад

"Что мы можем с вами делать? А вот что мы можем делать с вами." Невольно вспоминается Виталий Кличко с его словесными перлами :)

@TheBigChannel_ 2 года назад

Спасибо большое за ваш труд 🙏🏻

@ЭрмекСултанов-к9ь 6 лет назад

Интересный урок, хочу еще !!!

@stonesutd 6 лет назад

Вполне подробный обзор 👌 Ждем полной поддержки браузерами

@diterbolen9301 6 лет назад

она уже давно есть во всех современных браузерах

@someoneneverknown1120 6 лет назад

Отличный видос, Гош. Лайк без вопросов.

@ВалентинЖданов-ъ3н 4 года назад

СПАСИБО!!! Grid-супер тема!!!!

@fathers_stories 7 месяцев назад

спасибо! разобрался с твоей помощью

@montenote 3 года назад

Спасибо. Всё доступно

@gogo-jr3im Год назад

Спасибо большое!

@gameforgame3268 4 года назад

спасибо разобрался я думал это сложно

@dimka3628 3 года назад

Спасибо,ясно и понятно.Респект

@konstantino7016 5 лет назад

Супер! Супер! Супер! Огромное спасибо за понятное и простое разъяснение!

@masterphp 4 года назад

Давай ещё ) Красавчик!

@myratsaryyev7953 6 лет назад

спасибо давно искал русскую версию

@Ванна-с6ш 2 года назад

великолепно, спасибо!

@sergeykomarovsky3524 5 лет назад

Хороший урок. Прогрессивная технология, за ней будущее. Код более компактный и фактически конструктор.

@XiongMaooo 5 лет назад

Огромное спасибо, очень классный урок!

@sergei888kuz6 5 лет назад

Я просто здесь пописаю 8:16

@maksimzolotoi3379 4 года назад

😂😂😂😂😄

@Евгений-х7п9с 3 года назад

Sergei888 Kuz я просто похлопаю 😂🤣

@AK-it4nk 6 лет назад

Гоша, отличный видос!

@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 строки? В общем, шаг влево, шаг вправо - одни непонятки, которые в видосике тактично обойдены)))

@закадром-р3п 5 лет назад

Согласен я них не понял как использовать 😂

@закадром-р3п 5 лет назад

Нужно смотреть дальше разные видео с других коналов ятобы понять я так думаюбудет более понятно потому что где то автор мог забыть что то где то просто не дораскозать

@coldy7382 5 лет назад

Супер, спасибо большое за объяснение

@lackevil3730 4 года назад

Лучший! Спасибо большое!

@oleksandr_mykhailov 4 года назад

Очень круто, спасибо

@logand5408 3 года назад

Я по началу хотел примеры, а уже к середине всё понял)

@WalterWhite-ck5rz 4 года назад

Спасибо! :)

@sevakvart1111 4 года назад

Очень полезный урок, 5+

@MrSemyon87 6 лет назад

Отличное видео! Хорошая замена Bootstrap.

@widny31 4 года назад

Я, который мучался с flex: *А ЧЁ, ТАК МОЖНО БЫЛО ЧТО-ЛИ?!*

@yuriiya7752 4 года назад

flex-box так то очень гибок и удобен

@widny31 4 года назад

@@yuriiya7752 но только в одном направлении

@ironorion8888 3 года назад

@@widny31 что за хрень ты несешь. по времени что гридами что флексами если не выдумывать спец задач для олимпиады даунов

@BagaevRoman 3 года назад

Гоша, огромное тебе спасибо! Я почему-то отписался от твоего канала, так как долго не заходил, а тут снова понадобилось и снова твой канал. Все теперь подписка постоянная. По видео: очень внятно и очень быстро (в хорошем значении контекста этого слова) объяснил практически все возможности, что мне необходимы для решения своей задачи. Супер!

@wtf_mlbb2663 3 года назад

я получил очень хорошые знания спасибо большое

@АсхатТишбаев 4 года назад

Просто красавчик. Не жует, не мямлит, не тянет кота за усы. Большая вам благодарность сударь

@АлександрК-т3ы 4 года назад

клевое объяснение

@TigranKheranyan-c1s 3 года назад

огромное спасибо😁😁👨‍💻

@вассявассин-ч3ц Год назад

Хорошо😊

@РоманГайдай-г2р 3 года назад

Крутое видео

@alexgrigoriev7133 5 лет назад

Спасибо за урок)

@cameron2505 Год назад

Гоша, молодцом! Палец вверх и я абонирую твой канал. Ты мне здорово помог, родной.

@ivanchernov5361 2 года назад

Это талант!3 фунции грид сетки обьяснять пол часа

@ngc_657 3 года назад

CSS Grid идеально подходит для вёрстки сайта табличного макета

@АлексейАнанин-ю1п 6 лет назад

Довольно интересная штука, спасибо! Очень удобно работать с ней.

@vladimirww5152 3 года назад

Очень полезно!

@egortwo2830 5 лет назад

За пару минут (ролик длится 25 минут) )

@fairboi3061 4 года назад

видео да, теперь верстка за пару минут будет

@2kbuy 5 лет назад

Спасибо за урок

@mikesheva3 5 лет назад

Красавчик!

@tavsheng 4 года назад

Спасибо. Понял всё.

@evgenika7472 3 года назад

Спасибо

@karenkostandyan5672 6 лет назад

лайк за видос.

@p_levin 6 лет назад

удачи вам в ie :)

@n1ades 6 лет назад

Павел Левин он устарел, какой смысл писать под него сайты

@zerxa 6 лет назад

Умные люди под IE ничего кроме рамки "обнови свой брайзер" не делают ;-)

@yuliyamassett9356 6 лет назад

Flexbox и Grid одинаково поддерживаются в IE.

@woofiwo6136 6 лет назад

Во многих странах ещё IE используется, и довольно таки хорошо. Но начиная с 9й версии. Поэтому придержите такие заявления!

@Deonok 6 лет назад

Woofi Wo во многих странах? довольно таки хорошо? ахахаха) по рунету 1.68% и глобально 3.89% пользователей юзают невероятно удобный и прогрессирующий IE

@STRIPPEDSTAR 4 года назад

Спасибо 🙏

@alekseevich_psk 2 года назад

Збс!

@galinapopova 4 года назад

огромное спасибо))))

@ivkis3270 6 лет назад

Ооо, вот это тема)

@awenn2015 6 лет назад

Забыл рассказать про grid-templace-area , где можно в несколько строк указывать сколько fr занимают и сколько по высоте будут , хотя может я что-то и путаю

@romanmed9035 2 года назад

получается что к каждому элементу адреснове обращение. а если таких элементов сотни, которые формируются перебором списка для заполнения инпутами формы и столко же css писать?

@mr_Multitask 3 года назад

Гоша, большое спасибо за подробное видео!!! Очень помогло!!! А что если у меня текста много в фиксированном блоке и я не хочу чтобы блок расстягивался. Как сделать скролл текста в фиксированном по ширине и высоте блоке?

@RuchejAlex 5 лет назад

Как сделать, что бы последний элемент заполняет свободные колонки? Например ||| ||| __ Или ||||| ||__

@variagc1232 3 года назад

Отличный урок, но... Это больше резиновая вёрстка, а есть урок про именно адаптивную? Чтобы блоки при изменении экрана меняли своё местоположение и не привязывались к жёсткому количеству блоков в строке?

@TimkaSakenov 3 года назад

Сама адаптивность под разные масштабы никак не касается Grid системы. Чтобы сделать адаптивность нужно просто использовать @media под нужные классы

@dexterstarr164 9 месяцев назад

А flexbox используют в 2023 или какие-то еще технологии сейчас больше используются?

@yahyo5452 2 года назад

спс

@ev7662 6 месяцев назад

скажите 12 грид это сразу можно построить в или сперва в ??? если имеются тексты и фотографии

@ynivermine7750 4 года назад

кул спасибо большое ))

@modultre 3 года назад

super

@yusufbeky4527 3 года назад

у меня есть вопрос, допустим у меня есть 6 блоков и 3 в каждом ряду, как сделать с помощью css grid чтобы они при уменьшении экрана, вставали в 2 блока в ряд и потом 1 блок в ряду?