Модуль: CSS Grid

1. Основные свойства контейнера (родительского элемента)

1. display: grid;
   Включает режим Grid для контейнера. Без этого свойства Grid не работает.

2. grid-template-columns
   Определяет количество и размеры колонок.
   Примеры:

   • grid-template-columns: 1fr 1fr 1fr; (три равные колонки)

   • grid-template-columns: 200px 1fr; (первая колонка фиксированной ширины, вторая занимает оставшееся пространство)

3. grid-template-rows
   Определяет количество и размеры строк.
   Примеры:

   • grid-template-rows: 100px auto 200px; (три строки с разной высотой)

4. gap (или row-gap и column-gap)
   Задает отступы между элементами сетки.
   Примеры:

   • gap: 10px; (отступы между строками и колонками)

   • row-gap: 20px; column-gap: 10px; (разные отступы для строк и колонок)

5. grid-template-areas
   Позволяет задавать именованные области для размещения элементов.
   Пример:

   .container {
     grid-template-areas:
       "header header"
       "main sidebar"
       "footer footer";
   }

6. justify-content
   Выравнивает сетку по горизонтали внутри контейнера (если сетка меньше контейнера).
   Примеры:

   • justify-content: center; (центрирует сетку)

   • justify-content: space-between; (равномерно распределяет пространство между элементами)

7. align-content
   Выравнивает сетку по вертикали внутри контейнера (если сетка меньше контейнера).
   Примеры:

   • align-content: start; (выравнивает сетку к началу)

   • align-content: space-around; (равномерно распределяет пространство вокруг элементов)

8. grid-auto-rows и grid-auto-columns
   Задают размеры для автоматически создаваемых строк или колонок (если элементов больше, чем явно задано в grid-template-rows или grid-template-columns).
   Пример:

   • grid-auto-rows: 100px; (все автоматически созданные строки будут высотой 100px)

2. Свойства для дочерних элементов (элементов сетки)

1. grid-column
   Определяет, в каких колонках будет размещаться элемент.
   Примеры:

   • grid-column: 1 / 3; (элемент занимает колонки с 1 по 2)

   • grid-column: span 2; (элемент занимает 2 колонки)

2. grid-row
   Определяет, в каких строках будет размещаться элемент.
   Примеры:

   • grid-row: 2 / 4; (элемент занимает строки с 2 по 3)

   • grid-row: span 3; (элемент занимает 3 строки)

3. grid-area
   Позволяет разместить элемент в именованной области (если используется grid-template-areas).
   Пример:

   .item {
     grid-area: header; /* Элемент будет размещен в области "header" */
   }

4. justify-self
   Выравнивает элемент по горизонтали внутри своей ячейки.
   Примеры:

   • justify-self: start; (выравнивает элемент к началу ячейки)

   • justify-self: center; (центрирует элемент)

5. align-self
   Выравнивает элемент по вертикали внутри своей ячейки.
   Примеры:

   • align-self: end; (выравнивает элемент к концу ячейки)

   • align-self: stretch; (растягивает элемент на всю высоту ячейки)

3. Полезные функции и единицы измерения

1. fr (fraction)
   Единица измерения, которая указывает долю доступного пространства.
   Пример:

   • grid-template-columns: 1fr 2fr; (первая колонка занимает 1 часть, вторая — 2 части)

2. repeat()
   Позволяет повторять шаблон для колонок или строк.
   Пример:

   • grid-template-columns: repeat(3, 1fr); (три равные колонки)

3. minmax()
   Задает минимальный и максимальный размер для колонок или строк.
   Пример:

   • grid-template-columns: minmax(100px, 1fr); (колонка не меньше 100px, но может растягиваться)

4. auto-fit и auto-fill
   Используются с repeat() для автоматического заполнения пространства.
   Пример:

   • grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); (колонки автоматически подстраиваются под доступное пространство)

4. Практические примеры использования

1. Создание сетки с фиксированными и гибкими колонками:

   .container {
     display: grid;
     grid-template-columns: 200px 1fr 1fr;
     gap: 10px;
   }

2. Адаптивная сетка с использованием auto-fit:

   .container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 10px;
   }

3. Использование именованных областей:

   .container {
     display: grid;
     grid-template-areas:
       "header header"
       "main sidebar"
       "footer footer";
   }
   .header { grid-area: header; }
   .main { grid-area: main; }
   .sidebar { grid-area: sidebar; }
   .footer { grid-area: footer; }

5. Что важно запомнить:

• display: grid; — основа для работы с Grid.

• grid-template-columns и grid-template-rows — основные свойства для создания структуры.

• gap — для отступов между элементами.

• fr, repeat(), minmax() — полезные инструменты для гибкой верстки.

• grid-column и grid-row — для управления размещением элементов.

Эти свойства покрывают 90% задач, с которыми вы столкнетесь при работе с CSS Grid.