Полный гайд по CSS Grid: адаптивная верстка за пару минут
Вставка
- Опубліковано 24 лип 2018
- Новый взгляд на создание адаптивных красивых сайтов - 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
Гоша, спасибо тебе огромное за твой труд! Бесценно! Удачи тебе, и делись и дальше своим опытом и актуальным материалом - несомненно, тебе вернётся в разы больше!
Гоша как всегда самый реальный чел. Просто, доступно, без воды, молодец!
Просто красавчик.
Не жует, не мямлит, не тянет кота за усы.
Большая вам благодарность сударь
Шок, как же ты объясняешь прекрасно, спасибо!)
Гоша я у тебя очень многому научился, все уроки у тебя на одном дыхании без лишней воды! Здоровья тебе и процветания в твоих делах! Благодарю, ставлю лайк, а подписан на канал я уже давно)
Rava Bat согласен
Идеальные уроки
а ты английский поучи, может, тогда переводчики не понадобятся... вот, например, самый популярный канал, откуда десятки таких Гош тупо тянут и переводят контент, не знаю как это с т.з. прав, наверное никак.... ua-cam.com/video/jV8B24rSN5o/v-deo.html
@@ltdsci2171 демн ман
ай сов ит
Не,нихуя одна нудятина которая почти нихуя не даст
@@ltdsci2171 уж лучше так у гоши смотреть, чем у какого то американца. Да и тем более на родном языке, а это гораздо лучше
Георгий, выражаю Вам благодарность за этот потрясающий урок.
Очень просто и понятно объясняешь,спасибо.А то я читал.читал ,весь мозг выкипел и ничего не понял.А тут посмотрел и сразу всё понятно стало =)
Очень качественный контент, браво! Аплодирую стоя =)
Умопомрачительно! Супер сетки.
Теперь главное чтобы хватило человеку фантазии как все эти блоки перемешивать
Спасибо за труд! Всё понятно и при этом сжато.
спасибо тебе огромное ,за 25 мин есть все что нужно для основного понимания и умения!
Спасибо! Все очень круто и просто! Решил заново пройти гриды и в добрый путь к Реакту))
Это божественно!! На одном дыхании зашло!
спасибо огромное, очень понятно и доступно всё объяснил👍
Гоша, отличный видос!
Хороший урок, четко по существу и наглядно. Что бы не листать куча документации и сравнивать тут сразу всё ясно.
Вау! Спасибо огромное !!! Все так понятно и доступно❤️
Отличный видос, Гош. Лайк без вопросов.
Огромное спасибо, очень классный урок!
Автор, большое тебе спасибо за урок. Гриды действительно упрощают процесс написания сайта. Теперь буду их использовать в своих проектах.
Молодца мужик ) долго искал того кто расскажет что то нормально )
Отличный урок! Думал, что flex-box это лучшее, что есть в верстке, но оказывается, есть еще лучше...
С Новым годом ! Спасибо за уроки )🤗❄☃🎄🎆🎉🎅
Гоша ты Лучший!!! Спасибо огромное :)
видео - бомба!!! Гоша как всегда рулит!
Интересный урок, хочу еще !!!
большое спасибо за видео! чудесный гайд, все понятно и наглядно :) хотя про линии было чуть-чуть тяжело понять, думаю, анимация поверх примера придала бы информативности. когда третий блок поменялся местами с четвертым я вообще выпала :D наложение блоков тоже впечатляет. сетки рулят!
Давай ещё ) Красавчик!
Спасибо большое за ваш труд 🙏🏻
понятный и эффективный гайд по гридам, ставлю лукаса
Видео хороше, про grid area еще надо добавить
developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
Тут тоже хороший материал от Mozilla. Прочитай эту статью и закрепи материал игрой Grid Garden: cssgridgarden.com/
@@user-ls2en2mb4c Спасибо, годная информация!
смотрю это в рамке плейлиста по цсс и должен заметить, что время положительно влияет на качество и подачу материала в твоих уроках
Гошан вообще от души!
Оооо! 5 лет назад! Как летит время... и технологии!
Хороший урок по Гридам, всё отлично разжевал. Только я искал Адаптив на гриде (под разрешение смартфона), но ответа не получил. Будем искать...
Супер, спасибо большое за объяснение
Вполне подробный обзор 👌 Ждем полной поддержки браузерами
она уже давно есть во всех современных браузерах
Ай дарагой спасибо тебе, отличная система эти сетки думаю в паре с бутстрапом можно будет создавать реально потрясные вещи.
блин
СПАСИБО МУЖИК !
ясно и доступно
Лучший! Спасибо большое!
Спасибо за урок)
Честно говоря, просто здорово.
Гоша блогодарочка за видосик !
Спасибо большое за ролик, очень сильно помог решить проблему с картинками!
спасибо давно искал русскую версию
Не очень понял как работает grid-row по долям, как будто бы всегда нужно вычитать одну строку из значений, которые мы пишем. Но все равно супер, так легко и понятно и наглядно все показано. Благодарю!
Очень круто, спасибо
Отличное видео! Хорошая замена Bootstrap.
Спасибо,ясно и понятно.Респект
Это просто ахринительно удобно... думаю через пару лет все перейдут на грид. Круто, спасибо за гайд)
Уже на работу в Москве только с такими навыками верстальщиков ищут.
Вообщето все сайты которые вы скачиваете с инета то у всех grid ( bootstrap)
Иностраные програмисты уже давно используют bootsrtip grid
И это было еще 2017 г если я не ошибаюсь
Мужик о чем ты вообще? Ты пишеш что flex нету justify-items
Хотя автор говорил не о flex а о grid
И нассет bootsrtap это свободный набор инструментов для создания сайтов итд
А во торых да я немного псих но какой же ты после этого грубый человек .
Спасибо за ликбез! Полезно!
спасибо бро, сразу стало понятно, подписка)))
Спасибо. Всё доступно
спасибо разобрался я думал это сложно
СПАСИБО!!! Grid-супер тема!!!!
великолепно, спасибо!
Margin читается как марджин, items как айтэмз.
Но вообще спасибо за видео. Годное!
Только неделю учу все эти html u css и уже понимаю что мне нафиг не надо вникать сильно в эти table с их ячейками))
Спс очень полезное видео
Хороший урок. Прогрессивная технология, за ней будущее. Код более компактный и фактически конструктор.
спасибо! разобрался с твоей помощью
"Что мы можем с вами делать? А вот что мы можем делать с вами." Невольно вспоминается Виталий Кличко с его словесными перлами :)
Очень полезный урок, 5+
Ооо, вот это тема)
Супер! Супер! Супер! Огромное спасибо за понятное и простое разъяснение!
Спасибо! :)
Спасибо за урок
Я по началу хотел примеры, а уже к середине всё понял)
Спасибо. Понял всё.
Красавчик!
Довольно интересная штука, спасибо! Очень удобно работать с ней.
Спасибо большое!
Спасибо огромное!
Гоша, огромное тебе спасибо! Я почему-то отписался от твоего канала, так как долго не заходил, а тут снова понадобилось и снова твой канал. Все теперь подписка постоянная. По видео: очень внятно и очень быстро (в хорошем значении контекста этого слова) объяснил практически все возможности, что мне необходимы для решения своей задачи. Супер!
я получил очень хорошые знания
спасибо большое
огромное спасибо😁😁👨💻
лайк за видос.
Забыл рассказать про grid-templace-area , где можно в несколько строк указывать сколько fr занимают и сколько по высоте будут , хотя может я что-то и путаю
Очень полезно!
Гоша, большое спасибо за подробное видео!!! Очень помогло!!! А что если у меня текста много в фиксированном блоке и я не хочу чтобы блок расстягивался. Как сделать скролл текста в фиксированном по ширине и высоте блоке?
Спасибо!
Крутое видео
красавчик! охуенно объяснил!
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 строки?
В общем, шаг влево, шаг вправо - одни непонятки, которые в видосике тактично обойдены)))
Согласен я них не понял как использовать 😂
Нужно смотреть дальше разные видео с других коналов ятобы понять я так думаюбудет более понятно потому что где то автор мог забыть что то где то просто не дораскозать
СУПЕР!!!!!!!!!!!!!!!!
Спасибо 🙏
А правильно ли указывать значение фракций в процентах? Вместо 1fr 2fr 1fr указать 25fr 50fr 25fr (проценты записаны в виде fr)
Подскажите, как Гридами без медиа-запосов сделать так, чтобы 2 блока сначала переносились на новую строчку, а потом резинились в минимум?
клевое объяснение
Подскажите, пож, начинающему, как одновременно выделить и заменить несколько классов или тегов с одинаковым названием в html коде? Во многих роликах это видел, но как сделать не нашел.. Спасибо!
Гоша, молодцом! Палец вверх и я абонирую твой канал.
Ты мне здорово помог, родной.
кул спасибо большое ))
сульно,и круто ))
Хорошо😊
Гоша, а есть справочник нормальный по гридам?
удачи вам в ie :)
Павел Левин он устарел, какой смысл писать под него сайты
Умные люди под IE ничего кроме рамки "обнови свой брайзер" не делают ;-)
Flexbox и Grid одинаково поддерживаются в IE.
Во многих странах ещё IE используется, и довольно таки хорошо. Но начиная с 9й версии. Поэтому придержите такие заявления!
Woofi Wo во многих странах? довольно таки хорошо? ахахаха) по рунету 1.68% и глобально 3.89% пользователей юзают невероятно удобный и прогрессирующий IE
Сделай курс по Луа
Я просто здесь пописаю 8:16
😂😂😂😂😄
Sergei888 Kuz я просто похлопаю 😂🤣
Как сделать, что бы последний элемент заполняет свободные колонки? Например
|||
|||
__
Или
|||||
||__
CSS Grid идеально подходит для вёрстки сайта табличного макета
11:37 - а как сделать так чтобы остальные два элемента не увеличивались , а те два что снизу заполнили пустое место?
Збс!