Что такое GRID контейнеры и Grid-Верстка? Изучение всех CSS стилей для создания Grid-сетки и размещения в ней блоков. Как позиционировать контейнеры внутри Грида, наложение Grid-областей одна на другую и много еще чего полезного. Уроки по CSS и способы компановки макета страницы.

#cssgrid #gridверстка #уроки #css

Язык CSS:
Часть 1: Основы CSS - https://youtu.be/2bYzY2VsDxc
Часть 2: Стили шрифта, текста, цвет и фон, списки - https://youtu.be/IGK1L9GfMFs
Часть 2.1: Отступы и границы - https://youtu.be/W1sdXf6EXpU
Часть 3: Блочная модель в CSS. Позиционирование объектов - https://youtu.be/qfrdnWxKMV0
Часть 4: Flexbox в CSS - https://youtu.be/a6ongLiF1oI
Часть 5: Верстка на плавающих (FLOAT) блоках - https://youtu.be/8gSz7AM12hY

Полный курс веб-программирование: https://youtu.be/0rKu6vKL01s

Содержание:
00:00 - Вступление
00:54 - Что такое Grid? Обзор ключевых особенностей GRID схемы
02:48 - Grid-lines и нумерация направляющих линий
05:30 - Grid области и Grid ячейки
07:20 - Основные стили CSS для создании Grid-сетки
09:28 - grid-template-rows и grid-template-columns
12:55 - Автораспределение вложенных блоков по Grid сетке
14:03 - grid-auto-flow - изменения направления оси автораспределения блоков
16:00 - Позиционирование вложенной Grid области по ячейкам
17:08 - grid-row-start, grid-row-end, grid-column-start, grid-column-end
23:29 - grid-row, grid-column - сокращенная запись позиции
25:40 - Оператор repeat(N, size), единицы задания размера ячейки px % auto и fr
31:10 - Оператор minmax(x1,x2) - задать пределы размера
34:15 - Позиции через grid-area и grid-template-areas
42:18 - Наложение Grid-областей в общих ячейках
47:10 - Отступы gap, row-gap, column-gap