Модуль CSS Grid состоит из большого количества свойств. Я разбил их на логические группы, чтобы было проще понять что за что отвечает и как использовать.
1. Введение в CSS Grid. Разбираемся с терминологией
Вводное видео в модуль CSS Grid. В нем разберемся с основными понятиями, о которых нужно знать при работе с Grid CSS. В рамках этого видео вы узнаете что такое grid контейнер (grid container), что такое grid элемент (grid item). Так же, мы поговорим о поддержке грид современными браузерами. Вы узнаете о таких понятия как grid line - линия грида, grid cell - ячейка, grid area - область, grid track.
2. ГЛАВНЫЕ свойства в CSS Grid
В этом видео разбираемся со свойствами, которые отвечают за Шаблон, за то, как сетка должна выглядеть в Grid CSS: количество строк/колонок, ширина и высота ячеек. Познакомимся с укороченной записью, а так же, затронем свойство относящееся к грид элементу.
3. Позиционирование ячеек в CSS Grid
Поскольку CSS Grid - двумерная сетка, то в ней можно располагать ячейки в 2х мерном пространстве, как по оси X, так и по оси Y. В этом видео я покажу, как можно позиционировать отдельно взятый грид элемент (grid item). Все свойства в этом видео относятся к grid item, а не к контейнеру (grid container).
4. Генерация строк и колонок в CSS Grid. Алгоритмы построения сетки
Свойства grid-auto-columns / grid-auto-rows позволяют сгенерировать размеры для строк и колонок, которые не были определены при определении шаблона. Свойство grid-auto-flow позволяет менять алгоритм выстраивания грид элементов в рамках контейнера.
5. Пишем МЕНЬШЕ со свойством grid
Свойство grid является укороченной записью для ряда свойств, которые мы с вами рассмотрели в предыдущих видео. Оно может принимать несколько значений в различных вариациях и работает с такими свойствами как grid-template, grid-template-rows, grid-auto-columns, grid-template-columns и не только.
6. Выравнивание ЯЧЕЕК внутри Grid контейнера
Свойства justify-content / align-content / place-content предназначены для выравнивания ячеек по горизонтали и вертикали в рамках грид контейнера (grid container).
7. Выравнивание КОНТЕНТА внутри ячеек в модуле CSS Grid
Свойства justify-items и align-items служат для выравнивания контента внутри ячеек. justify-items служит для горизонтального выравнивания. align-items служит для вертикального выравнивания. place-items является укороченной записью для обоих этих свойств.
8. КАК выровнять контент в отдельной ячейке в CSS Grid?
Свойство justify-self служит для горизонтального выравнивая контента внутри отдельно взятой ячейки. Свойство justify-self служит для вертикального выравнивая контента внутри отдельно взятой ячейки. Если вам требуется выровнять контент внутри отдельно взятой ячейки одновременно по горизонтали и по вертикали, вы можете воспользоваться укороченной записью - place-self.
9. Задаём ОТСТУПЫ между ячейками в CSS Grid
Свойство grid-column-gap позволяет задать отступ между колонками. Свойство grid-row-gap позволяет задать отступ между строка. Свойство grid-row является укороченной записью свойств grid-column-gap и grid-row-gap и позволяет задать размеры одновременно между строками и колонками.