Видео урок по 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:05] - Введение [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 ✔Для поддержки развития канала: Сбербанк VISA: 4276 5200 1409 4318 Yandex: 410011260821995 - https://yasobe.ru/na/itdoctor QIWI: 4890 4943 0383 5581 WMR: R444308690108 WMZ: Z608507028676 ✔Советую посмотреть: Уроки по HTML: https://www.youtube.com/playlist?list=PLuY6eeDuleIMjV7Kff8yf8RA-XwjXVGgl Быстрый старт в CSS: https://youtu.be/X3fwcl_qx50 Flexbox: https://youtu.be/NddTNohooIs ✔Наши группы в Социальных сетях: Сайт ITDoctor: http://itdoctor.info/ Группа в ВК: https://vk.com/itdoctorstudio Мой Twitter: https://twitter.com/ITDoctor_morph ◄ Предыдущее видео: https://youtu.be/3xaN1tDdkF4 ► Следующее видео: Подписывайтесь на канал ITDoctor и нажимайте на колокольчик чтобы сразу узнавать о появлении новых видео. ✔https://www.youtube.com/c/ITDoctor?sub_confirmation=1