Весь GRID за 39 минут. Теория и практика по гридам (Основы HTML и CSS)
В этом видео разберёмся с гридами, научимся создавать колонки и ряды, определимся с терминологией гридов, узнаем как грид создает колонки и ряды самостоятельно и как этим управлять. Поймем как растягивать элементы на несколько ячеек и задавать отступы между колонками и рядами. Узнаем о значениях и функциях которые применяются в реальной практике и научимся создавать адаптивные грид-конейнеры. Так же увидим как располагать грид-сетку и грид-элементы.
🚀 НАЧНИ ОБУЧЕНИЕ В ШКОЛЕ WEB PRO. Получить первый урок, тест и домашнее задание можно совершенно бесплатно по ссылке ниже:
https://t.me/webproschool_bot?start=l...
💙 Мы в VK:
https://vk.com/webproschool
💬 Присоединяйся к нашему чату веб-разработчиков:
https://t.me/webproschool_chat
❤️ Сохрани плейлист с уроками по HTML и CSS, тестами и практикой: • Курс по основам HTML и CSS с тестами и пра...
Данный курс будет полезен всем начинающим веб-разработчикам, которые хотят узнать как создать сайт и изучить язык разметки HTML и язык стилей CSS. В ходе обучения вы сможете получить тесты и практические задания на закрепление материала.
🔗 Полезные ссылки с урока:
https://cssgridgarden.com/#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 Что будет дальше
