Web 1.7 - Grid контейнеры в CSS. Полное руководство по GRID стилям

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

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

Язык CSS:

Содержание:
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

[kplktut]

Спасибо, очень подробно и ясно про Grid. И теперь легче стало анализировать макет, чтобы понять где лучше использовать Flexbox, а где Grid.

[jlpvrhk]

grid-teplate-areas это то что надо.... Рекомендую..