CSS Grid. Полный курс

#YauhenK #webDev #CSS #CSSGrid
Всех приветствую в курсе «CSS Grid».
Модуль CSS3 Grid Layout - это один из самых интересных, модулей в семействе CSS3. Задача, которую решает модель CSS3 Grid Layout, очень проста и понятна - предоставить удобный механизм расположения контента по виртуальной сетке. В данном видео-курсе мы с вами рассмотрим все особенности данной сетки, её использование для вёрстки, а так же сравним с уже с существующими способами построения «каркаса» веб-страницы.
✒ Timeline:
✔ 0:00 - Введение в курс
✔ 3:27 - Применение сетки к контейнеру
✔ 8:40 - Создание 3х колоночного макета
✔ 14:30 - Управление размерами и позицией grid-элемента
✔ 20:45 - Именование grid-линий, создание сетки, позиционирование элементов
✔ 28:39 - Выравнивание grid-элементов
✔ 32:23 - Выравнивание grid-контейнера
✔ 37:23 - Управлять порядком элементов внутри grid-контейнера
✔ 42:22 - Вложенность grid-элементов
✔ 46:42 - Гибкость grid-элеменов при изменении размеров экрана
✔ 50:04 - Создание гибкого макета
✒ Используемые ресурсы и инструменты:
✔ Codepen (Онлайн редактор кода): codepen.io
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ KZbin: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

[@user-mp2js7gy1e]

1 час потратил весь мой день, но я рад что нашёл тебя

[@smartbrain4623]

Исчерпывающе, наглядно, детально. Спасибо) Видос супер🤘

[@piotrl7618]

Спасибо, автор очень доходчиво объясняет! Ждём новых видео

[@sergekost1980]

Спасибо! Отличный разбор, очень актуально )

[@shamilsalakhutdinov5519]

офигекнское видео по гридам, спасибо за подробное объяснение!

[@alexandr8978]

Это лучшее видео по Grid! Спасибо! Теперь хоть ясно стало, что да как от самого начала и до конца Спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@usernamer519]

Лучшее видео по grid css. Огромное спасибо!!

[@YauhenKavalchuk]

Всегда пожалуйста

[@user-pt1te3uh7f]

Это однозначно да, как и курс по Flexbox👍

[@tigran842]

Просто супер.... Все четко и доходчиво👍 держи лайк

[@user-yw6bj5oe9w]

Низкий поклон тебе добрый молодец... Многое узнал, и закрепил. Благодарю.

[@YauhenKavalchuk]

Пожалуйста)

[@prostoy-cheloveck]

Спасибо тебе большущее за столь развернутое и полное ознакомление с гридами. И отдельное спасибо за тайм коды, это очень полезно и продуктивно

[@YauhenKavalchuk]

Спасибо за поддержку!

[@user-yk5iv1yc6l]

Пожалуй, это лучшее объяснение технологии на данный момент.Спасибо,очень помогли!

[@YauhenKavalchuk]

Пожалуйста

[@polli6408]

Всё чётко и по теме. Спасибо большое, видео очень понравилось!

[@YauhenKavalchuk]

Спасибо за отзыв!

[@user-sq2ph1ow3h]

Великолепное объяснение! Наглядно и понятно. Спасибо!

[@YauhenKavalchuk]

Пожалуйста)

[@lowator]

Шикарные уроки, максимально наглядно и понятно. Очень приятно практиковаться по этому гайду. В самый раз для освоения базы. Большое спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@user-xd3we2qp4i]

Спасибо за видео! Объяснили очень понятно и доходчиво!

[@YauhenKavalchuk]

Пожалуйста

[@user-ru8zk4ws5r]

Спасибо за коректно изложенную информацию!

[@YauhenKavalchuk]

Пожалуйста

[@reginar905]

Лучшее видео по Grid Layout! Спасибо большое автору!!!!

[@YauhenKavalchuk]

Спасибо большое за отзыв)

[@diktashum15]

Спустя три года это видео просто пушка в сравнении сколько видео я пересмотрел. везде все вроде понятно но тут разжовано на максимум! Спасибо!

[@YauhenKavalchuk]

Спасибо за отзыв

[@tianshano]

Очень хорошее видео для изучения, всё подробно и наглядно объяснено :) большое спасибо за Ваш труд!

[@YauhenKavalchuk]

Большое спасибо за отзыв!

[@igorkl5167]

Одно из лучших видео по grid css! Спасибо большое, автор. Уверен, что создание такого видео требует много времени.

[@YauhenKavalchuk]

Спасибо за отзыв

[@atoomotr3553]

Спасибо! Как всегда урок на высоком уровне, несмотря, что уже прошло много времени.

[@YauhenKavalchuk]

Пожалуйста

[@mr.warpunch6007]

Мощный не только СSS grid, но и видео, спасибо автору

[@YauhenKavalchuk]

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

[@sssattarov]

Четко.Кратко.Понятно. Благодарю автору за такую годноту!

[@YauhenKavalchuk]

Пожалуйста

[@psix9618]

Cпасибо за урок!

[@nata_shka]

Спасибо за урок. Детально и понятно.

[@YauhenKavalchuk]

Пожалуйста)

[@user-mv2oj6bn2u]

Недавно досконально начал изучать HTML, CSS и нарвался на Ваш канал. Очень подробно, доходчиво, спасибо за труд!

[@YauhenKavalchuk]

Спасибо за отзыв

[@enjicITmagic]

видео понравилось, очень круто, вы супер!

[@YauhenKavalchuk]

Круто!)

[@bormanbormanov3323]

Один из лучших уроков спустя сколько времени, спасибо

[@YauhenKavalchuk]

Спасибо большое за отзыв

[@TheError220]

Спасибо, очень хорошо объясняешь!

[@YauhenKavalchuk]

Спасибо за отзыв

[@user-yl3ej1ss3g]

За пол года с лишним дошел до изучения React, ну и пока шел естественно уже забыл верстку практически которую изучал в начале пути. Наткнулся на хороший курс по React в котором проект построен в плане верстки на гридах. Сначала испугался, думал пропущу я эти гриды поскольку когда начинал учиться с флексом разобрался 50/50. И тут решил все таки попробовать посмотреть поверхностную инфу. Как же я ошибался на сколько все просто и удобно. Автору большое спасибо за отсутствие воды, за перемотку момента написания кода и т.д. Очень крутой базовый видеосправочник, чего с головой хватает для задач которые сейчас передо мной стоят. Как закончу курс по реакту обязательно пошарюсь по каналу!!!

[@YauhenKavalchuk]

Спасибо большое за отзыв)

[@PieceOfInternet]

Офигенное видео! Спасибо большое!) очень и очень мало полезных видео касательно grid на ютубе, и вы заслуживаете гораздо больше подписчиков/лайков/просмотров!

[@YauhenKavalchuk]

Спасибо за отзыв и поддержку)

[@whicencer8819]

Однозначно. Фрилансер по жизни хуже объяснил

[@marlonbrando458]

Чётенько, с меня лайк!

[@user-ex4qq4yx1p]

Спасибо, очень крутое видео! круто что все вместе. Все структурировано. все понятно. по полочкам и по порциям. Божьих благословений тебе!

[@YauhenKavalchuk]

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

[@dgtal1]

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

[@Freelancer19841]

Потрясающая лекция. Спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@user-zn9gq3qn2s]

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

[@YauhenKavalchuk]

Пожалуйста

[@marianechaeva8138]

Спасибо за ваши уроки!

[@YauhenKavalchuk]

Пожалуйста

[@konstantinreut2577]

Красава!!! Спасибо за ваш труд!

[@YauhenKavalchuk]

Пожалуйста)

[@saodattimur6267]

korotko chetko kontent deystvitelno polezny! spasibo Avtoru!

[@YauhenKavalchuk]

Пожалуйста

[@imaima7723]

Лучшее видео про эту технологию!Спасибо)

[@YauhenKavalchuk]

Пожалуйста

[@imaima7723]

@@YauhenKavalchuk как вы считаете,стоит ли учить flex и float если есть grid?

[@YauhenKavalchuk]

Flex однозначно стоит, на канале кстати есть курс. А вот float можно уже пропустить

[@user-pt1te3uh7f]

Спасибо за мощный урок

[@YauhenKavalchuk]

Пожалуйста

[@paulradyna5079]

thank you for your great explanation regarding css-grid-layout. good luck!

[@YauhenKavalchuk]

thanks

[@user-nk2cx8mn5r]

Восторг ) Спасибо большое ) Думаю что такое видео заслуживает намного больше лайков 🙄

[@YauhenKavalchuk]

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

[@Bratkovsl]

Спасибо! Все очень понятно

[@YauhenKavalchuk]

Пожалуйста

[@Yoda7766]

Самое топовое видео, что нашел! Благодарю!!! =)

[@YauhenKavalchuk]

Пожалуйста

[@user-wl2hi2hs8m]

Спасибо! Отличное качество контента

[@YauhenKavalchuk]

Всегда пожалуйста

[@unknown.6914]

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

[@YauhenKavalchuk]

Пожалуйста

[@yaroslavzef7267]

Благодарочка!

[@user-ib4mv3uw6k]

лучший туториал по гридам. Все по полочкам

[@YauhenKavalchuk]

Спасибо)

[@user-ib4mv3uw6k]

@@YauhenKavalchuk не за что - правду говорить легко и приятно)) Могу я спросить: Вы фронтендер по профессии? Имею ввиду- практика у вас большая или больше теоретически?

[@aleksey2408]

Спасибо ! Очень помогло !

[@YauhenKavalchuk]

Пожалуйста)

[@temjekmasta]

ЕСЛИ ПОСМОТРЕТЬ ВИДЕО ТРИ, ЧЕТЫРЕ РАЗА ТО ВСЕ СТАНЕТ ПОНЯТНО ДАЖЕ ЧЕЛОВЕКУ КОТОРЫЙ ТОЛЬКО НЕДАВНО НАЧАЛ ИЗУЧАТЬ ВЕРСТКУ. СПАСИБО, все отлично разъяснено ))

[@YauhenKavalchuk]

Спасибо большое за отзыв

[@kostiantynsydorenko7344]

ты молодец. очень крутое видео

[@user-rp8oy2kf5d]

Топовый гайд по гридам

[@YauhenKavalchuk]

Спасибо)

[@reckless_owl4801]

Искал решение проблемы на протяжении 5 часов, после просмотра вашего видео,- проблему решил за 30 минут. Спасибо большое.

[@YauhenKavalchuk]

Пожалуйста

[@EugenySubbotin]

классно! все уроки в одном - нашел!

[@YauhenKavalchuk]

👍

[@TheTexPro]

Спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@plegmatik]

отлично,спасибо за видос. палец и подписка

[@YauhenKavalchuk]

Спасибо за отзыв

[@owenfrozen]

Кайф, смотрится как интересный сериал, легко и не принуждённо 😄

[@YauhenKavalchuk]

Спасибо

[@user-uw5tg5iq8f]

наконецто я нашол великолепный урок

[@user-mm1uu5mg9h]

Благодарю! Очень ёмкий и насыщенный курс! Ничего лишнего, все четко и понятно. Интересно, зачем используют до сих пор flex, если есть grid?

[@YauhenKavalchuk]

Спасибо. На самом деле для каждой технологии есть свои специфичные задачи.

[@user-ve7tx3ud6n]

Спасибо Вам.

[@YauhenKavalchuk]

Пожалуйста

[@user-hj1eh8dk9p]

Чем более продвинутая технология, тем меньше требуется писать кода. Особенно понравились создание макет с помощью именованных линий и создание гибкого макета.

[@YauhenKavalchuk]

👍

[@saluteismyname]

Спасибо!!!

[@YauhenKavalchuk]

Пожалуйста

[@yur.nester]

Отличное обьяснение. Мысли складываются как яблочки в корзину

[@YauhenKavalchuk]

Спасибо

[@lvivduncan]

потужне відео, Євген! дякую

[@YauhenKavalchuk]

Пожалуйста)

[@vladimirww5152]

Класс!

[@YauhenKavalchuk]

Спасибо)

[@alsusayfulina1865]

Отличный курс 👍 Очень благодарна за него! У тебя здорово выходит, удачи во всех проектах!))

[@YauhenKavalchuk]

Спасибо

[@Justflywithegs223]

на сегодня - поддержка браузерами 96% !!! круто !

[@YauhenKavalchuk]

👍

[@nuradiledilov784]

Лучший канал по веб-технологиям на просторах рутуба. Контент как всегда топ, но не понял практического применение именования grid-линий. Что без них, что с ними одно и тоже и дополнительного удобства или читабельности тоже не ощутил.

[@YauhenKavalchuk]

Да, для меня это тоже загадка. Мне больше нравится именовать через aria - это намного нагляднее и понятнее. Но раз такое есть, значит и есть варианты использования

[@Ryterish]

Спасибо

[@YauhenKavalchuk]

Пожалуйста

[@mixm1572]

Дзякуй

[@YauhenKavalchuk]

Кали ласка)

[@maksRnik]

Ты гений

[@YauhenKavalchuk]

Благодарю

[@user-oa0e74awe5o]

38:17 бобрал🤣 (Бобро поржаловать) но уроки супер👍👍 нашел этот клад благодаря RSS а именно Виктору Ковалеву, который и подсказал название.

[@YauhenKavalchuk]

🙂

[@user-nl9nh4yj9u]

Добрый вечер,спасибо огромное за курс!Объясните пожалуйста разницу между align-items,justify-items и align-content,justify-content!Заранее спасибо!

[@whoyeahyou]

Да

[@servus7314]

Спасибо за очередное классное видео. Подскажите пожалуйста, планируете ли обновить текущее видео (2019г), с учетом того, что Грид стал еще распространен и популярнее?

[@YauhenKavalchuk]

Пока нет, он вполне актуален и рассказывает всё необходимое

[@toxiq7532]

то что надо

[@YauhenKavalchuk]

спасибо

[@user-hn5st1pl4p]

Мы в шараге по этим видосам учимся 👍. Надеюсь вы учитесь в нормальном месте

[@YauhenKavalchuk]

🙂

[@user-hn5st1pl4p]

@@YauhenKavalchuk Ля, мне тоже весело🙂🙂🙂. Расскажу подробнее раз пошло дело. У нас верстку ведет женщина лет 60, явно плохо разбирающаяся в it. Прочитает нам введение с какого-нибудь метанита, потом включает проектор и говорит: "вот вам видео-урок, переписывайте ссылку, смотрите." После этого видео она раздала всем листочки - рисуйте мне макет для гридов. У каждого проверю! Спасибо за внимание. Надеюсь вам повезло больше

[@ivansidorov5]

А можно ли заставить работать grid как table? (ячейки автоматически выравниваются под контент, заголовки столбцов синхранизируются с широной ячеек столбца) и все это без использования JS

[@YauhenKavalchuk]

Не думаю что получится. Слишком много зависимостей. Хотя, варианты можно поискать

[@malyna]

CSS Grid Layout - 93.85%

[@YauhenKavalchuk]

Это видео собрано из моего курса 2018 года. Поэтому данные о поддержке старые

[@artedza]

@@YauhenKavalchukнадо ж было указать)

[@user-yw6bj5oe9w]

Все делал как ты показывал....ещё несколько раз потренируюсь и в путь.... :)))) есть вопрос по поводу GRID(оф).... Это всё, или есть ещё что-то, что нужно знать?

[@YauhenKavalchuk]

Этот курс - очень хорошая база, его вполне хватает. Осталось только потренировать практику

[@sb9185]

Евгений здравствуйте, в каких случаях не работает auto-fit и auto fill ? Я имею ввиду в каких условиях не выполняется это свойство, может ли мешать строчка кода или значение в процентах и т.д ? Не могли бы Вы помочь, просто я искал на зарубежных сайтах но не нашёл ответа ? Кстати очень жду курс по Redux)

[@YauhenKavalchuk]

Обычно, когда такие вопросы приходят, то я прощу сделать пример в какой-нибудь песочнице и поделиться ссылкой. По словам трудно понять, как работает код. Касаемо курса по Redux он уже есть на канале, поищите в плейлистах

[@user-tn1sj9zn9q]

Спасибо за видео! Иногда не хватает визуального сопровождения, когда ты много говоришь и показываешь черный экран, я не могу сконцентрироваться) Были бы какие-то схемки или картинки по теме, было бы супер.

[@YauhenKavalchuk]

Это был первый серьёзный курс на канале. Сейчас всё на много лучше)

[@maksymkrokhmaliuk7719]

Дякую

[@YauhenKavalchuk]

Пожалуйста

[@Antinormanisto]

а в чем отличие justify-content и justify-items? вроде одинаково при обоих случаях. 34:26

[@boole_cat]

В чем отличие align-self от align-items и align-content. align-content примерно понятно применяется к контейнеру но остальные применяются к элементу же? и делают одно и тоже...

[@YauhenKavalchuk]

Добавьте чуть больше элементов и поизменяйте ширину экрана

[@Anshegar]

У меня почемуто внутреняя сетка выходит за пределы ячейки P.S. Нашел в чем беда - у внетреней сетки grid-gap и padding сносят верстку нафиг, но получается что внутрение отступы нифига не сделать . уже на 4 колонках внутреней сетки все начинает наезжать на соседние блоки, даже без падингов и гэпов. Короч надо ячейки внешней сетки больше делать, минимум 250px если во внутреней сетке больше 4 элементов, иначе все все посъедет к херам

[@YauhenKavalchuk]

👍

[@iGotton]

+

[@pupizoid100]

Извиняясь за глупый вопрос? А почему такая странная вещь. Чтобы выровнять текст по центру внутри элемента грид. Нужно grid-item задать display: flex; а потом применять выравнивание по центру align-items: center; justify-content: center;

[@YauhenKavalchuk]

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

[@pupizoid100]

@@YauhenKavalchuk понятно спасибо, а то я пыжился думал как картинку и текст выровнять внутри грид))

[@boole_cat]

в 22 году что выбрать флекс или грид?

[@YauhenKavalchuk]

Используются оба, просто для разных задач

[@boole_cat]

@@YauhenKavalchuk видео конкретных примеров , когда бы выбрали флек или грид было бы многим интересно.Спасибо!

[@Antinormanisto]

24:00 не до конца понял всё же про именование и про span

[@zergzerg4844]

почему то не срабатывает медиа запрос @media (max-width: 320px) .На 510 работает, убирается сайдбар и остаются 2 колонки., а дальеш когда уменьшаю окно , стопорится на 2х колонках и все. Все далел строго по вашему уроку, не пойму в чем может быть дело.

[@YauhenKavalchuk]

Перепроверьте синтаксис, возможно где-то допустили ошибку

[@zergzerg4844]

@@YauhenKavalchuk да, нашел, действительно косяк в синтаксисе был, спасибо

[@_kie]

Женя, прямо жесткое эхо... За видео спасибо. Звук - печаль.

[@YauhenKavalchuk]

Соррян, на момент съёмки микрофон был не айс(.

[@qwantumstudio4369]

​@@YauhenKavalchuk у вас на скрине 31%, а сейчас 93,85%

[@YauhenKavalchuk]

Это видео собрано из моего курса 2018 года. Поэтому данные о поддержке старые

[@questionsanswer6293]

В данном уроке все было хорошо кроме того что не объяснили привязку наименований grid-area, показали ее только в самом конце а как и что она работает не понятно..(

[@evgeniyprowork]

А чего вчера ролик был удален ?

[@YauhenKavalchuk]

Он не был удалён, наверное - это глюк KZbin, т.к. на этом ролике стоит отложенная публикация

[@denissaveliev2664]

а в конце,что за новый синтаксис?

[@denissaveliev2664]

и код css не совподает с тем,что на примере с права

[@YauhenKavalchuk]

Уточните время где это

[@daniilkazak7323]

А это видео еще актуально ?

[@YauhenKavalchuk]

Актуально

[@JdIm6fhjLgdWRhn]

46:00

[@YauhenKavalchuk]

🤔

[@romanpetrashkevich5292]

откуда взялась цифра 31.95%? у меня показывает 93.81%

[@YauhenKavalchuk]

Это курс начала 2018 года

[@ejafarow]

Ты именовал row и col но откуда взялась span, эту часть я не понял

[@YauhenKavalchuk]

Span - это просто размер, 2-й подход при определении размеров ячеек

[@ejafarow]

@@YauhenKavalchuk спасибо за ответ, просмотрел полный гайд на css-tricks, все стало ясно 👍

[@valeksano]

Что за звук на 04:48?

[@YauhenKavalchuk]

Переслушал раза 3, ничего не услышал)