- Лайфстайл
- Недвижимость
- Здоровье
- Природа
- Дизайн
- Техника и оборудование
- Бизнес и предпринимательство
- Искусство
- Религия
- Строительство и ремонт
- Сад и огород
- Аудиокниги
- Кулинария
- Интервью
- Развлечения
- Лайфхаки
- Эзотерика
- Охота и рыбалка
- Наука
- Политика
- Психология
- Аудио
- Технологии и интернет
- Красота
- Телепередачи
- Детям
- Аниме
- Хобби
- Видеоигры
- Юмор
- Образование
- Спорт
- Разное
- Путешествия
- Животные
- Новости и СМИ
- Мультфильмы
- Музыка
- Сериалы
- Фильмы
- Авто-мото
Видео урок по CSS Grid Layout, все свойства css grid, справочник по grid css layout в подарок
Это Видео урок по CSS Grid Layout в котором я расскажу вам про все свойства css grid layout, мы рассмотрим основы grid css и посмотрим как делается css grid адаптивная верстка страницы. Это введение в grid css технологии, которое позволит понять что такое грид сетка и начать верстать без помощи таких фреймворков как Bootstrap, а на чистом CSS с применением grid css layout.
Так же я подготовил для вас подробный Справочник по grid css layout. Обязательно добавляйте ссылку в закладки и пользуйтесь.
Справочник по grid css layout: https://morphismail.github.io/css-grid-manual/
Свойства настройки сетки: grid-template-columns, grid-template-rows, grid-column-start, grid-column-end, grid-column, grid-row, grid-column-gap, grid-row-gap, grid-gap, grid-auto-columns, grid-auto-rows, grid-auto-flow, grid-template-areas, grid-area
Свойства выравнивания: justify-items, align-items, place-items, justify-content, align-content, place-content, align-self, justify-self, place-self
00:00 Введение
01:39 Теория по CSS Grid
05:00 Сравнение с Flexbox
05:34 Поддержка браузерами CSS Grid
06:20 Создание Grid сетки (display: grid)
13:00 Настройка строк и столбцов (grid-template-columns, grid-template-rows, grid-column-start, grid-column-end, grid-column, grid-row)
17:13 Отступы между элементами (grid-column-gap, grid-row-gap, grid-gap)
18:54 Значения по умолчанию для колонок и рядов (grid-auto-columns, grid-auto-rows)
22:09 Изменить направление grid элементов (grid-auto-flow)
23:17 Шаблон сетки (grid-template-areas, grid-area)
26:25 Приёмы адаптивной Grid сетки
29:01 Сокращенное свойство grid-template
31:17 Свои названия линий в CSS Grid
33:26 Выравнивание элементов внутри ячеек (justify-items, align-items, place-items)
36:27 Выравнивание сетки внутри контейнера (justify-content, align-content, place-content)
39:23 Выравнивание содержимого элементов (align-self, justify-self, place-self)
40:57 Выводы и О моём справочнике css grid manual
✔Советую посмотреть:
Уроки по HTML: https://www.youtube.com/playlist?list=PLuY6eeDuleIMjV7Kff8yf8RA-XwjXVGgl
Быстрый старт в CSS: https://youtu.be/X3fwcl_qx50
Flexbox: https://youtu.be/NddTNohooIs
◄ Предыдущее видео: https://youtu.be/3xaN1tDdkF4
#css #css3 #itdoctor
Видео Видео урок по CSS Grid Layout, все свойства css grid, справочник по grid css layout в подарок автора ITDoctor
Видео Видео урок по CSS Grid Layout, все свойства css grid, справочник по grid css layout в подарок автора ITDoctor
Информация
1 мая 2022 г. 15:00:41
00:44:36
Похожие видео







![[aggressive inline] - BROKE](http://pic.rutubelist.ru/video/2025-02-01/0c/d1/0cd104e8325de44fa8364d3855ebc9ef.jpg?size=s)














