Курс 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-and-css-advanced/?utm_source=yt&utm_medium=yt_html_adv_bacis_css_22&utm_campaign=yt_html_adv_bacis_css_22
Новые уроки каждую неделю!
Мы в социальных сетях:
Facebook: https://www.facebook.com/fructcodecom/
Instagram: https://www.instagram.com/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

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