CSS Grid. Полный курс
HTML-код
- Опубликовано: 26 июл 2024
- #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
✒ Автор курса:
✔ RUclips: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...
1 час потратил весь мой день, но я рад что нашёл тебя
офигекнское видео по гридам, спасибо за подробное объяснение!
Это лучшее видео по Grid! Спасибо! Теперь хоть ясно стало, что да как от самого начала и до конца Спасибо!
Пожалуйста
Исчерпывающе, наглядно, детально. Спасибо) Видос супер🤘
Спасибо, автор очень доходчиво объясняет! Ждём новых видео
Спасибо! Отличный разбор, очень актуально )
Лучшее видео по grid css. Огромное спасибо!!
Всегда пожалуйста
Это однозначно да, как и курс по Flexbox👍
Просто супер.... Все четко и доходчиво👍 держи лайк
Пожалуй, это лучшее объяснение технологии на данный момент.Спасибо,очень помогли!
Пожалуйста
Низкий поклон тебе добрый молодец...
Многое узнал, и закрепил.
Благодарю.
Пожалуйста)
Одно из лучших видео по grid css! Спасибо большое, автор. Уверен, что создание такого видео требует много времени.
Спасибо за отзыв
Спустя три года это видео просто пушка в сравнении сколько видео я пересмотрел. везде все вроде понятно но тут разжовано на максимум! Спасибо!
Спасибо за отзыв
Спасибо тебе большущее за столь развернутое и полное ознакомление с гридами. И отдельное спасибо за тайм коды, это очень полезно и продуктивно
Спасибо за поддержку!
Всё чётко и по теме. Спасибо большое, видео очень понравилось!
Спасибо за отзыв!
За пол года с лишним дошел до изучения React, ну и пока шел естественно уже забыл верстку практически которую изучал в начале пути. Наткнулся на хороший курс по React в котором проект построен в плане верстки на гридах. Сначала испугался, думал пропущу я эти гриды поскольку когда начинал учиться с флексом разобрался 50/50. И тут решил все таки попробовать посмотреть поверхностную инфу. Как же я ошибался на сколько все просто и удобно.
Автору большое спасибо за отсутствие воды, за перемотку момента написания кода и т.д. Очень крутой базовый видеосправочник, чего с головой хватает для задач которые сейчас передо мной стоят.
Как закончу курс по реакту обязательно пошарюсь по каналу!!!
Спасибо большое за отзыв)
Cпасибо за урок!
Спасибо! Как всегда урок на высоком уровне, несмотря, что уже прошло много времени.
Пожалуйста
Великолепное объяснение! Наглядно и понятно. Спасибо!
Пожалуйста)
Очень хорошее видео для изучения, всё подробно и наглядно объяснено :) большое спасибо за Ваш труд!
Большое спасибо за отзыв!
Спасибо, очень крутое видео! круто что все вместе. Все структурировано. все понятно. по полочкам и по порциям. Божьих благословений тебе!
Спасибо большое
Шикарные уроки, максимально наглядно и понятно. Очень приятно практиковаться по этому гайду. В самый раз для освоения базы. Большое спасибо!
Пожалуйста
Лучшее видео по Grid Layout! Спасибо большое автору!!!!
Спасибо большое за отзыв)
Чётенько, с меня лайк!
Мощный не только СSS grid, но и видео, спасибо автору
Спасибо большое
Большое спасибо!
Офигенное видео! Спасибо большое!) очень и очень мало полезных видео касательно grid на ютубе, и вы заслуживаете гораздо больше подписчиков/лайков/просмотров!
Спасибо за отзыв и поддержку)
Однозначно. Фрилансер по жизни хуже объяснил
Недавно досконально начал изучать HTML, CSS и нарвался на Ваш канал. Очень подробно, доходчиво, спасибо за труд!
Спасибо за отзыв
thank you for your great explanation regarding css-grid-layout. good luck!
thanks
Спасибо за видео! Объяснили очень понятно и доходчиво!
Пожалуйста
Один из лучших уроков спустя сколько времени, спасибо
Спасибо большое за отзыв
Спасибо за коректно изложенную информацию!
Пожалуйста
Четко.Кратко.Понятно. Благодарю автору за такую годноту!
Пожалуйста
видео понравилось, очень круто, вы супер!
Круто!)
Благодарочка!
Спасибо за урок. Детально и понятно.
Пожалуйста)
Спасибо, очень хорошо объясняешь!
Спасибо за отзыв
Спасибо за уроки!
Пожалуйста
Спасибо! Отличное качество контента
Всегда пожалуйста
ты молодец. очень крутое видео
Красава!!! Спасибо за ваш труд!
Пожалуйста)
Искал решение проблемы на протяжении 5 часов, после просмотра вашего видео,- проблему решил за 30 минут. Спасибо большое.
Пожалуйста
korotko chetko
kontent deystvitelno polezny!
spasibo Avtoru!
Пожалуйста
Восторг ) Спасибо большое ) Думаю что такое видео заслуживает намного больше лайков 🙄
Спасибо большое)
Спасибо за ваши уроки!
Пожалуйста
Спасибо! Все очень понятно
Пожалуйста
Самое топовое видео, что нашел! Благодарю!!! =)
Пожалуйста
очень полезный урок, спасибо!
Пожалуйста
Топовый гайд по гридам
Спасибо)
Лучшее видео про эту технологию!Спасибо)
Пожалуйста
@@YauhenKavalchuk как вы считаете,стоит ли учить flex и float если есть grid?
Flex однозначно стоит, на канале кстати есть курс. А вот float можно уже пропустить
Спасибо за мощный урок
Пожалуйста
Спасибо ! Очень помогло !
Пожалуйста)
Потрясающая лекция. Спасибо!
Пожалуйста
классно! все уроки в одном - нашел!
👍
ЕСЛИ ПОСМОТРЕТЬ ВИДЕО ТРИ, ЧЕТЫРЕ РАЗА ТО ВСЕ СТАНЕТ ПОНЯТНО ДАЖЕ ЧЕЛОВЕКУ КОТОРЫЙ ТОЛЬКО НЕДАВНО НАЧАЛ ИЗУЧАТЬ ВЕРСТКУ. СПАСИБО, все отлично разъяснено ))
Спасибо большое за отзыв
Спасибо!
Пожалуйста
лучший туториал по гридам. Все по полочкам
Спасибо)
@@YauhenKavalchuk не за что - правду говорить легко и приятно)) Могу я спросить: Вы фронтендер по профессии? Имею ввиду- практика у вас большая или больше теоретически?
наконецто я нашол великолепный урок
Кайф, смотрится как интересный сериал, легко и не принуждённо 😄
Спасибо
отлично,спасибо за видос. палец и подписка
Спасибо за отзыв
Спасибо Вам.
Пожалуйста
Благодарю! Очень ёмкий и насыщенный курс! Ничего лишнего, все четко и понятно.
Интересно, зачем используют до сих пор flex, если есть grid?
Спасибо. На самом деле для каждой технологии есть свои специфичные задачи.
Класс!
Спасибо)
Спасибо!!!
Пожалуйста
Отличный курс 👍 Очень благодарна за него! У тебя здорово выходит, удачи во всех проектах!))
Спасибо
на сегодня - поддержка браузерами 96% !!! круто !
👍
потужне відео, Євген! дякую
Пожалуйста)
Чем более продвинутая технология, тем меньше требуется писать кода. Особенно понравились создание макет с помощью именованных линий и создание гибкого макета.
👍
Отличное обьяснение. Мысли складываются как яблочки в корзину
Спасибо
Спасибо
Пожалуйста
Лучший канал по веб-технологиям на просторах рутуба. Контент как всегда топ, но не понял практического применение именования grid-линий. Что без них, что с ними одно и тоже и дополнительного удобства или читабельности тоже не ощутил.
Да, для меня это тоже загадка. Мне больше нравится именовать через aria - это намного нагляднее и понятнее. Но раз такое есть, значит и есть варианты использования
Дзякуй
Кали ласка)
Ты гений
Благодарю
то что надо
спасибо
Добрый вечер,спасибо огромное за курс!Объясните пожалуйста разницу между align-items,justify-items и align-content,justify-content!Заранее спасибо!
Да
38:17 бобрал🤣 (Бобро поржаловать) но уроки супер👍👍 нашел этот клад благодаря RSS а именно Виктору Ковалеву, который и подсказал название.
🙂
CSS Grid Layout - 93.85%
Это видео собрано из моего курса 2018 года. Поэтому данные о поддержке старые
@@YauhenKavalchukнадо ж было указать)
Спасибо за очередное классное видео. Подскажите пожалуйста, планируете ли обновить текущее видео (2019г), с учетом того, что Грид стал еще распространен и популярнее?
Пока нет, он вполне актуален и рассказывает всё необходимое
Мы в шараге по этим видосам учимся 👍. Надеюсь вы учитесь в нормальном месте
🙂
@@YauhenKavalchuk Ля, мне тоже весело🙂🙂🙂. Расскажу подробнее раз пошло дело. У нас верстку ведет женщина лет 60, явно плохо разбирающаяся в it. Прочитает нам введение с какого-нибудь метанита, потом включает проектор и говорит: "вот вам видео-урок, переписывайте ссылку, смотрите." После этого видео она раздала всем листочки - рисуйте мне макет для гридов. У каждого проверю! Спасибо за внимание. Надеюсь вам повезло больше
А можно ли заставить работать grid как table? (ячейки автоматически выравниваются под контент, заголовки столбцов синхранизируются с широной ячеек столбца) и все это без использования JS
Не думаю что получится. Слишком много зависимостей. Хотя, варианты можно поискать
Дякую
Пожалуйста
Все делал как ты показывал....ещё несколько раз потренируюсь и в путь.... :))))
есть вопрос по поводу GRID(оф)....
Это всё, или есть ещё что-то, что нужно знать?
Этот курс - очень хорошая база, его вполне хватает. Осталось только потренировать практику
+
Спасибо за видео! Иногда не хватает визуального сопровождения, когда ты много говоришь и показываешь черный экран, я не могу сконцентрироваться) Были бы какие-то схемки или картинки по теме, было бы супер.
Это был первый серьёзный курс на канале. Сейчас всё на много лучше)
Евгений здравствуйте, в каких случаях не работает auto-fit и auto fill ? Я имею ввиду в каких условиях не выполняется это свойство, может ли мешать строчка кода или значение в процентах и т.д ? Не могли бы Вы помочь, просто я искал на зарубежных сайтах но не нашёл ответа ?
Кстати очень жду курс по Redux)
Обычно, когда такие вопросы приходят, то я прощу сделать пример в какой-нибудь песочнице и поделиться ссылкой. По словам трудно понять, как работает код. Касаемо курса по Redux он уже есть на канале, поищите в плейлистах
а в чем отличие justify-content и justify-items? вроде одинаково при обоих случаях. 34:26
24:00 не до конца понял всё же про именование и про span
У меня почемуто внутреняя сетка выходит за пределы ячейки
P.S. Нашел в чем беда - у внетреней сетки grid-gap и padding сносят верстку нафиг, но получается что внутрение отступы нифига не сделать .
уже на 4 колонках внутреней сетки все начинает наезжать на соседние блоки, даже без падингов и гэпов.
Короч надо ячейки внешней сетки больше делать, минимум 250px если во внутреней сетке больше 4 элементов, иначе все все посъедет к херам
👍
В чем отличие align-self от align-items и align-content. align-content примерно понятно применяется к контейнеру но остальные применяются к элементу же? и делают одно и тоже...
Добавьте чуть больше элементов и поизменяйте ширину экрана
В данном уроке все было хорошо кроме того что не объяснили привязку наименований grid-area, показали ее только в самом конце а как и что она работает не понятно..(
Женя, прямо жесткое эхо... За видео спасибо. Звук - печаль.
Соррян, на момент съёмки микрофон был не айс(.
@@YauhenKavalchuk у вас на скрине 31%, а сейчас 93,85%
Это видео собрано из моего курса 2018 года. Поэтому данные о поддержке старые
46:00
🤔
в 22 году что выбрать флекс или грид?
Используются оба, просто для разных задач
@@YauhenKavalchuk видео конкретных примеров , когда бы выбрали флек или грид было бы многим интересно.Спасибо!
почему то не срабатывает медиа запрос @media (max-width: 320px) .На 510 работает, убирается сайдбар и остаются 2 колонки., а дальеш когда уменьшаю окно , стопорится на 2х колонках и все. Все далел строго по вашему уроку, не пойму в чем может быть дело.
Перепроверьте синтаксис, возможно где-то допустили ошибку
@@YauhenKavalchuk да, нашел, действительно косяк в синтаксисе был, спасибо
А чего вчера ролик был удален ?
Он не был удалён, наверное - это глюк RUclips, т.к. на этом ролике стоит отложенная публикация
а в конце,что за новый синтаксис?
и код css не совподает с тем,что на примере с права
Уточните время где это
Что за звук на 04:48?
Переслушал раза 3, ничего не услышал)
откуда взялась цифра 31.95%? у меня показывает 93.81%
Это курс начала 2018 года
Извиняясь за глупый вопрос? А почему такая странная вещь. Чтобы выровнять текст по центру внутри элемента грид.
Нужно grid-item задать
display: flex; а потом применять выравнивание по центру align-items: center;
justify-content: center;
Потому что грид лучше использоваться глобальной сетки, глобальных блоков и т.д. А Флекс больше заточен под точечный контроль чего-то небольшого. А вообще и то и то универсальные вещи и обе технологии позволяют управлять как глобальными блоками, так и контентом внутри себя
@@YauhenKavalchuk понятно спасибо, а то я пыжился думал как картинку и текст выровнять внутри грид))
А это видео еще актуально ?
Актуально
Можно х1.5 смотреть.
Ну, как вариант, хоть так)