Web 1.7 - Grid контейнеры в CSS. Полное руководство по GRID стилям
Что такое GRID контейнеры и Grid-Верстка? Изучение всех CSS стилей для создания Grid-сетки и размещения в ней блоков. Как позиционировать контейнеры внутри Грида, наложение Grid-областей одна на другую и много еще чего полезного. Уроки по CSS и способы компановки макета страницы.
#cssgrid #gridверстка #уроки #css
Язык CSS:
Часть 1: Основы CSS - • Лекция 1.4 - Web - Основы CSS. Селект...
Часть 2: Стили шрифта, текста, цвет и фон, списки - • Лекция 1.5 - Web - Стили CSS: Шрифты,...
Часть 2.1: Отступы и границы - • Лекция 1.5.1 - Web - Отступы Padding,...
Часть 3: Блочная модель в CSS. Позиционирование объектов - • Лекция 1.6 - Web - Блоки и позиционир...
Часть 4: Flexbox в CSS - • Лекция 1.7 - Web - Flex верстка в CSS...
Часть 5: Верстка на плавающих (FLOAT) блоках - • Лекция 1.8 - Web - Верстка HTML стран...
Полный курс веб-программирование: • Обзор курса WEB-программирование
Содержание:
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
