Весь GRID за 39 минут. Теория и практика по гридам (Основы HTML и CSS)

В этом видео разберёмся с гридами, научимся создавать колонки и ряды, определимся с терминологией гридов, узнаем как грид создает колонки и ряды самостоятельно и как этим управлять. Поймем как растягивать элементы на несколько ячеек и задавать отступы между колонками и рядами. Узнаем о значениях и функциях которые применяются в реальной практике и научимся создавать адаптивные грид-конейнеры. Так же увидим как располагать грид-сетку и грид-элементы. 🚀 НАЧНИ ОБУЧЕНИЕ В ШКОЛЕ WEB PRO. Получить первый урок, тест и домашнее задание можно совершенно бесплатно по ссылке ниже: 💙 Мы в VK: 💬 Присоединяйся к нашему чату веб-разработчиков: ❤️ Сохрани этот плейлист с уроками по HTML и CSS, тестами и практикой: Данный курс будет полезен всем начинающим веб-разработчикам, которые хотят узнать как создать сайт и изучить язык разметки HTML и язык стилей CSS. В ходе обучения вы сможете получить тесты и практические задания на закрепление материала. 🔗 Полезные ссылки с урока: #ru Таймкоды: 00:00 О чём это видео. 00:31 Что такое grid 01:01 Свойство display: grid 01:41 Свойство grid-template-columns 02:20 Терминология гридов 03:33 Свойство grid-template-rows 04:50 Неявно созданные колонки и ряды 06:35 Свойство grid-auto-rows 08:02 Свойство grid-auto-flow 08:42 Свойство grid-auto-columns 09:10 Свойство gap 10:17 Значение repeat 11:25 Значения для размеров колонок и рядов 11:45 Что такое фракция 13:24 Значение min-content 15:02 Значения max-content 15:24 Функция minmax() 17:14 Значение fit-content 17:56 auto-fit и auto-fill 20:26 Свойства grid-column, grid-row 22:35 Нумерация грид линий 25:00 Значение span 25:53 Названия для колонок и рядов 26:49 Грид области 29:36 justify-content, align-content 30:02 Шорткат place-content 30:26 justify-items, align-items 31:40 justify-self, align-self 33:10 z-index в грид 34:02 Верстка кейса из начала урока 38:30 Что будет дальше