CSS Grid #4 Именование grid-линий, создание сетки, позиционирование элементов
HTML-код
- Опубликовано: 6 сен 2024
- #YauhenK #webDev #CSS #CSSGrid
Всех приветствую в курсе «CSS Grid».
Модуль CSS3 Grid Layout - это один из самых интересных, модулей в семействе CSS3. Задача, которую решает модель CSS3 Grid Layout, очень проста и понятна - предоставить удобный механизм расположения контента по виртуальной сетке. В данном видео-курсе мы с вами рассмотрим все особенности данной сетки, её использование для вёрстки, а так же сравним с уже с существующими способами построения «каркаса» веб-страницы.
✒ Используемые ресурсы и инструменты:
✔ Codepen (Онлайн редактор кода): codepen.io
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R...
✒ Автор курса:
✔ RUclips: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenK...
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/Yau...
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/Yau...
Это просто супер! Я про вашу подачу материала.
Спасибо, большое!
Очень качественные уроки, во всем. Больше спасибо за труд!
Спасибо за отзыв!
Лучшие уроки по гридам!)Спасибо
Спасибо!
Отличное видио, информативное, класс
👍
хорошая подача материала , а про grid это вообще великолепно !
шикарная технология! Уроки - супер!
Спасибо
Присоединяюсь! Отлично вообще! Даже комент не лень написать было!
Очень круто!!! Спасибо вам!
Рад что понравилось! Спасибо за отзыв!
Top
Спасибо
отличный курс!)
Спасибо!
Спасибо!
Спасибо за поддержку
спасибо большое, все очень понятно объясняете!
Пожалуйста
Спасибо за качественный контент
Пожалуйста
Классные уроки!
Спасибо!
Respect
Thanks
лайк +подписка
Евгений, уроки как всегда супер! Вопрос: почему для 2х последних элементов grid-row: row 3/ row 3, а не grid-row: row 3/ row 4 ?
видимо разницы нет. можно и 3 / 3 или 3/4 писать. так как родительский контейнер не увеличивается.
Да у тебя талант объяснять >_>, шоб мне так кто объяснял.
Спасибо
прикольно!
как мы стилизуем grid-item9 если мы удалили дивы и оставили только 3?
Сумашествие!!! Почему я ранше не уделил время гриду - ума не приложу... Уроки топ, большое спасибо!
Спасибо и вам за фидбэк!
а по поводу именований "col" и "row" возможны ли конфликты имен? Вы в начале видео сказали что для хедера и для контента можно именовать линии, можно для обоих использовать "col" и "row"? Или задается namespace родителем с display: grid;? Спасибо.
Да конфликты будут, поэтому этот подход не использовал ни разу
@@YauhenKavalchuk Большое спасибо.
Пожалуйста
По-моему всё это можно делать без [col] и [row]. Получится, например, так: grid-column: 1 / 3; grid-row: 1 / 3.
Можно, для этой цели есть разные подходы
@@YauhenKavalchuk Тогда непонятно зачем вообще использовать именование? Да, спасибо за труд!
Здраствуйте Евгений, у меня проблема повторял за вами но все не работает как на видео, в чем может быть ошыбка ? Когда для .grid-item2 применяю col 3 / col 5 , row 1 / row 3 то он не расширяеться на два row SSMaker.ru/9fe2065e/
Он не расширяется, т.к. вы зажали фиксированную высоту (height: 80px), в то время, как лучше задать значение минимально высоты (min-height: 80px).
Спасибо большое !