Основные свойства CSS Grid с примерами

Свойства контейнера (родительского элемента)

1. display: grid | inline-grid
   Определяет элемент как grid-контейнер.

   .container {
     display: grid;
   }

2. grid-template-columns
   Задает размеры и количество колонок.

   .container {
     grid-template-columns: 100px 1fr 2fr;
   }

3. grid-template-rows
   Задает размеры и количество строк.

   .container {
     grid-template-rows: 50px auto 100px;
   }

4. grid-template-areas
   Создает именованные области сетки.

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

5. grid-template
   Сокращение для grid-template-rows, grid-template-columns, grid-template-areas.

   .container {
     grid-template: 
       "header header" 80px
       "sidebar content" 1fr
       / 200px 1fr;
   }

6. gap (или grid-gap)
   Задает промежутки между элементами.

   .container {
     gap: 10px 20px; /* row-gap column-gap */
   }

7. justify-items
   Выравнивает элементы по горизонтали внутри ячеек.

   .container {
     justify-items: start | end | center | stretch;
   }

8. align-items
   Выравнивает элементы по вертикали внутри ячеек.

   .container {
     align-items: start | end | center | stretch;
   }

9. place-items
   Сокращение для align-items и justify-items.

   .container {
     place-items: center stretch;
   }

10. justify-content
    Выравнивает сетку по горизонтали, если она меньше контейнера.

    .container {
      justify-content: start | end | center | space-around | space-between;
    }

11. align-content
    Выравнивает сетку по вертикали.

    .container {
      align-content: start | end | center | space-between;
    }

12. grid-auto-columns
    Задает размер для неявно созданных колонок.

    .container {
      grid-auto-columns: 100px;
    }

13. grid-auto-rows
    Задает размер для неявно созданных строк.

    .container {
      grid-auto-rows: 50px;
    }

14. grid-auto-flow
    Управляет авторазмещением элементов.

    .container {
      grid-auto-flow: row | column | dense;
    }

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

1. grid-column-start / grid-column-end
   Определяет начальную и конечную линии для колонки.

   .item {
     grid-column-start: 1;
     grid-column-end: 3;
   }

2. grid-row-start / grid-row-end
   Определяет начальную и конечную линии для строки.

   .item {
     grid-row-start: 2;
     grid-row-end: 4;
   }

3. grid-column / grid-row
   Сокращение для grid-column-start и grid-column-end (аналогично для grid-row).

   .item {
     grid-column: 1 / 3; /* или span 2 */
     grid-row: 2 / 4;
   }

4. grid-area
   Присваивает элемент к именованной области или задает позицию.

   .item {
     grid-area: header; /* Имя из grid-template-areas */
     /* Или: grid-area: row-start / column-start / row-end / column-end; */
   }

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

   .item {
     justify-self: start | end | center | stretch;
   }

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

   .item {
     align-self: start | end | center | stretch;
   }

7. place-self
   Сокращение для align-self и justify-self.

   .item {
     place-self: center end;
   }

Пример полной сетки:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px auto;
  gap: 10px;
  grid-template-areas: 
    "header header header"
    "sidebar content content";
}

.item-header {
  grid-area: header;
}
.item-sidebar {
  grid-column: 1 / 2;
}

Это основные свойства CSS Grid. Для более сложных сценариев можно использовать функции вроде minmax(), repeat(), fit-content().

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* 3 колонки по 100px */
  gap: 10px;
}

.item-1 {
  grid-column: 1 / 3; /* Занимает первые 2 колонки */
}

.item-2 {
  grid-column: 2 / span 2; /* Начинается со 2-й колонки, занимает 2 колонки */
}