Полный гайд по 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
![Fc ครับ ขอแนะนำให้รู้จักกับ "น้องเปียโน" l [Nickynachat]](http://i.ytimg.com/vi/HQU6Q_IYTLo/mqdefault.jpg)
Гоша, спасибо тебе огромное за твой труд! Бесценно! Удачи тебе, и делись и дальше своим опытом и актуальным материалом - несомненно, тебе вернётся в разы больше!
Гоша как всегда самый реальный чел. Просто, доступно, без воды, молодец!
Шок, как же ты объясняешь прекрасно, спасибо!)
Георгий, выражаю Вам благодарность за этот потрясающий урок.
Гоша я у тебя очень многому научился, все уроки у тебя на одном дыхании без лишней воды! Здоровья тебе и процветания в твоих делах! Благодарю, ставлю лайк, а подписан на канал я уже давно)
Rava Bat согласен
Идеальные уроки
а ты английский поучи, может, тогда переводчики не понадобятся... вот, например, самый популярный канал, откуда десятки таких Гош тупо тянут и переводят контент, не знаю как это с т.з. прав, наверное никак.... th-cam.com/video/jV8B24rSN5o/w-d-xo.html
@@ltdsci2171 демн ман
ай сов ит
Не,нихуя одна нудятина которая почти нихуя не даст
@@ltdsci2171 уж лучше так у гоши смотреть, чем у какого то американца. Да и тем более на родном языке, а это гораздо лучше
Очень просто и понятно объясняешь,спасибо.А то я читал.читал ,весь мозг выкипел и ничего не понял.А тут посмотрел и сразу всё понятно стало =)
Просто красавчик.
Не жует, не мямлит, не тянет кота за усы.
Большая вам благодарность сударь
Очень качественный контент, браво! Аплодирую стоя =)
Это божественно!! На одном дыхании зашло!
Спасибо! Все очень круто и просто! Решил заново пройти гриды и в добрый путь к Реакту))
Спасибо за труд! Всё понятно и при этом сжато.
спасибо тебе огромное ,за 25 мин есть все что нужно для основного понимания и умения!
Гоша, отличный видос!
Хороший урок, четко по существу и наглядно. Что бы не листать куча документации и сравнивать тут сразу всё ясно.
Умопомрачительно! Супер сетки.
Теперь главное чтобы хватило человеку фантазии как все эти блоки перемешивать
Вау! Спасибо огромное !!! Все так понятно и доступно❤️
Отличный видос, Гош. Лайк без вопросов.
спасибо огромное, очень понятно и доступно всё объяснил👍
С Новым годом ! Спасибо за уроки )🤗❄☃🎄🎆🎉🎅
Огромное спасибо, очень классный урок!
понятный и эффективный гайд по гридам, ставлю лукаса
Давай ещё ) Красавчик!
Молодца мужик ) долго искал того кто расскажет что то нормально )
Спасибо большое за ваш труд 🙏🏻
Автор, большое тебе спасибо за урок. Гриды действительно упрощают процесс написания сайта. Теперь буду их использовать в своих проектах.
Гоша ты Лучший!!! Спасибо огромное :)
Гошан вообще от души!
видео - бомба!!! Гоша как всегда рулит!
Отличный урок! Думал, что flex-box это лучшее, что есть в верстке, но оказывается, есть еще лучше...
Гоша блогодарочка за видосик !
Интересный урок, хочу еще !!!
большое спасибо за видео! чудесный гайд, все понятно и наглядно :) хотя про линии было чуть-чуть тяжело понять, думаю, анимация поверх примера придала бы информативности. когда третий блок поменялся местами с четвертым я вообще выпала :D наложение блоков тоже впечатляет. сетки рулят!
смотрю это в рамке плейлиста по цсс и должен заметить, что время положительно влияет на качество и подачу материала в твоих уроках
Честно говоря, просто здорово.
блин
СПАСИБО МУЖИК !
ясно и доступно
Супер, спасибо большое за объяснение
Ай дарагой спасибо тебе, отличная система эти сетки думаю в паре с бутстрапом можно будет создавать реально потрясные вещи.
Лучший! Спасибо большое!
Спасибо за урок)
Спасибо большое за ролик, очень сильно помог решить проблему с картинками!
Вполне подробный обзор 👌 Ждем полной поддержки браузерами
она уже давно есть во всех современных браузерах
Спасибо за ликбез! Полезно!
Спасибо. Всё доступно
спасибо бро, сразу стало понятно, подписка)))
Спасибо,ясно и понятно.Респект
Очень круто, спасибо
СПАСИБО!!! Grid-супер тема!!!!
Видео хороше, про grid area еще надо добавить
developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
Тут тоже хороший материал от Mozilla. Прочитай эту статью и закрепи материал игрой Grid Garden: cssgridgarden.com/
@@user-ls2en2mb4c Спасибо, годная информация!
Отличное видео! Хорошая замена Bootstrap.
спасибо давно искал русскую версию
великолепно, спасибо!
Очень полезный урок, 5+
Оооо! 5 лет назад! Как летит время... и технологии!
Хороший урок по Гридам, всё отлично разжевал. Только я искал Адаптив на гриде (под разрешение смартфона), но ответа не получил. Будем искать...
спасибо! разобрался с твоей помощью
"Что мы можем с вами делать? А вот что мы можем делать с вами." Невольно вспоминается Виталий Кличко с его словесными перлами :)
спасибо разобрался я думал это сложно
Хороший урок. Прогрессивная технология, за ней будущее. Код более компактный и фактически конструктор.
Это просто ахринительно удобно... думаю через пару лет все перейдут на грид. Круто, спасибо за гайд)
Уже на работу в Москве только с такими навыками верстальщиков ищут.
Вообщето все сайты которые вы скачиваете с инета то у всех grid ( bootstrap)
Иностраные програмисты уже давно используют bootsrtip grid
И это было еще 2017 г если я не ошибаюсь
Мужик о чем ты вообще? Ты пишеш что flex нету justify-items
Хотя автор говорил не о flex а о grid
И нассет bootsrtap это свободный набор инструментов для создания сайтов итд
А во торых да я немного псих но какой же ты после этого грубый человек .
Я по началу хотел примеры, а уже к середине всё понял)
Только неделю учу все эти html u css и уже понимаю что мне нафиг не надо вникать сильно в эти table с их ячейками))
Спс очень полезное видео
Спасибо большое!
Не очень понял как работает grid-row по долям, как будто бы всегда нужно вычитать одну строку из значений, которые мы пишем. Но все равно супер, так легко и понятно и наглядно все показано. Благодарю!
Спасибо за урок
Красавчик!
Margin читается как марджин, items как айтэмз.
Но вообще спасибо за видео. Годное!
Спасибо огромное!
Спасибо! :)
Ооо, вот это тема)
Спасибо. Понял всё.
лайк за видос.
я получил очень хорошые знания
спасибо большое
Довольно интересная штука, спасибо! Очень удобно работать с ней.
Крутое видео
огромное спасибо😁😁👨💻
Супер! Супер! Супер! Огромное спасибо за понятное и простое разъяснение!
Очень полезно!
СУПЕР!!!!!!!!!!!!!!!!
Спасибо!
клевое объяснение
Спасибо 🙏
Забыл рассказать про grid-templace-area , где можно в несколько строк указывать сколько fr занимают и сколько по высоте будут , хотя может я что-то и путаю
Гоша, большое спасибо за подробное видео!!! Очень помогло!!! А что если у меня текста много в фиксированном блоке и я не хочу чтобы блок расстягивался. Как сделать скролл текста в фиксированном по ширине и высоте блоке?
Гоша, огромное тебе спасибо! Я почему-то отписался от твоего канала, так как долго не заходил, а тут снова понадобилось и снова твой канал. Все теперь подписка постоянная. По видео: очень внятно и очень быстро (в хорошем значении контекста этого слова) объяснил практически все возможности, что мне необходимы для решения своей задачи. Супер!
Хорошо😊
кул спасибо большое ))
сульно,и круто ))
красавчик! охуенно объяснил!
CSS Grid идеально подходит для вёрстки сайта табличного макета
Гоша, молодцом! Палец вверх и я абонирую твой канал.
Ты мне здорово помог, родной.
Збс!
Подскажите, как Гридами без медиа-запосов сделать так, чтобы 2 блока сначала переносились на новую строчку, а потом резинились в минимум?
Спасибо
Я просто здесь пописаю 8:16
😂😂😂😂😄
Sergei888 Kuz я просто похлопаю 😂🤣
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 строки?
В общем, шаг влево, шаг вправо - одни непонятки, которые в видосике тактично обойдены)))
Согласен я них не понял как использовать 😂
Нужно смотреть дальше разные видео с других коналов ятобы понять я так думаюбудет более понятно потому что где то автор мог забыть что то где то просто не дораскозать
Гоша, а что лучше Grid или FlexBox ?
А правильно ли указывать значение фракций в процентах? Вместо 1fr 2fr 1fr указать 25fr 50fr 25fr (проценты записаны в виде fr)
Гоша, а есть справочник нормальный по гридам?
удачи вам в ie :)
Павел Левин он устарел, какой смысл писать под него сайты
Умные люди под IE ничего кроме рамки "обнови свой брайзер" не делают ;-)
Flexbox и Grid одинаково поддерживаются в IE.
Во многих странах ещё IE используется, и довольно таки хорошо. Но начиная с 9й версии. Поэтому придержите такие заявления!
Woofi Wo во многих странах? довольно таки хорошо? ахахаха) по рунету 1.68% и глобально 3.89% пользователей юзают невероятно удобный и прогрессирующий IE
получается что к каждому элементу адреснове обращение. а если таких элементов сотни, которые формируются перебором списка для заполнения инпутами формы и столко же css писать?
скажите 12 грид это сразу можно построить в или сперва в ??? если имеются тексты и фотографии