Курс HTML/CSS Advanced | Позиционирование CSS Grid: теория + практика

В этой серии уроков я расскажу про один из самых мощных и эффективных методов позиционирования HTML элементов. Это CSS Grid. Мы начнем с теории CSS Grid и изучим его основные свойства, такие как: display: grid, grid-template-columns, grid-template-rows, gap, column-gap, row-gap, grid-auto-rows, grid-auto-flow, grid-template-areas, place-content, а также css функции, как repeat(), minmax() и многое другое. После теории CSS Grid мы с вами перейдем к практике и сверстаем из HTML5 шаблона разные типы сайтов: Сайт с одной колонкой, сайт с двумя колонками и сайт с 3x колоночным типом. Я рекомендую изучать CSS Grid на сайте FructCode, где ты сразу сможешь закреплять полученные знания на практике, выполняя интерактивные упражнения CSS Grid в браузере. Я создал целый раздел посвященный CSS Grid позиционированию: https://fructcode.com/ru/courses/html... Новые уроки каждую неделю! Мы в социальных сетях: Facebook:   / fructcodecom   Instagram:   / fructcodecom   Vk: https://vk.com/fructcodecom Telegram: https://t.me/fructcode Содержание видео: 0:00 Введение CSS Grid 1:10 Лучший способ изучения CSS Grid 2:22 Свойство display: grid 4:23 Свойство grid-template-columns | Горизонтальное позиционирование 7:56 Свойства column-gap, row-gap, gap | Отступы между блоками Grid 10:43 CSS функция repeat() 11:30 Единица измерения FRACTION (fr) 12:43 CSS функция MinMax() 14:17 Свойство grid-template-rows | Вертикальное позиционирование 16:44 Свойство grid-auto-rows 18:52 Свойство grid-auto-flow 21:14 Свойства grid-column и grid-row и ключевое слово span 32:38 Свойства justify-content, align-content и place-content 35:46 Введение в практическую часть CSS Grid 37:41 Практическая часть CSS Grid. Свойства: grid-template-areas, grid-area | Сайт с одной колонкой и стилизация блоков 51:13 Практическая часть CSS Grid. Выравниваем и адаптивим картинки | Свойство auto-fill 58:37 Практическая часть CSS Grid | Сайт с двумя колонками 1:03:14 Практическая часть CSS Grid | Верстка макета сайта из 3х колонок 1:06:44 Практическая часть CSS Grid | Разделение левого sidebar на 2 блока 1:08:47 Заключительная часть --- #html​​, #css​​, #fructcode​​, #никонов​​, #nikonov​​, #верстка​ #basiccss, #styles, #grid, #grid_template_columns, #grid_template_rows, #gap, #column_gap, #row_gap, #grid_auto_rows, #grid_auto_flow, #grid_template_areas, #place_content, #grid_repeat, #grid_minmax