Главная1 курс UX/UI7 занятие. Grid Layout2. Свойства Grid Container
7 занятие

2. Свойства Grid Container

display

Определяет элемент как grid-контейнер.

.container {
  display: grid; /* Блочный grid-контейнер */
  display: inline-grid; /* Строчный grid-контейнер */
}

grid-template-columns и grid-template-rows

Определяют количество и размеры столбцов и строк.

.container {
  /* Три столбца: 100px, 1fr, 2fr */
  grid-template-columns: 100px 1fr 2fr;
  
  /* Две строки: 50px и автоматическая высота */
  grid-template-rows: 50px auto;
  
  /* Использование repeat() */
  grid-template-columns: repeat(3, 1fr); /* 3 столбца по 1fr */
  grid-template-rows: repeat(2, minmax(100px, auto));
  
  /* Именованные линии */
  grid-template-columns: [start] 1fr [middle] 1fr [end];
}

grid-template-areas

Определяет именованные области сетки.

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

.item-header { grid-area: header; }
.item-sidebar { grid-area: sidebar; }
.item-content { grid-area: content; }
.item-footer { grid-area: footer; }

grid-template

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

.container {
  grid-template: 
    [row1-start] "header header header" 50px [row1-end]
    [row2-start] "sidebar content content" 200px [row2-end]
    / 1fr 2fr 1fr;
}

gap (grid-gap)

Определяет промежутки между элементами.

.container {
  gap: 10px; /* Одинаковый gap для строк и столбцов */
  row-gap: 15px; /* Только между строками */
  column-gap: 20px; /* Только между столбцами */
  
  /* Устаревший синтаксис (поддерживается для совместимости) */
  grid-gap: 10px;
  grid-row-gap: 15px;
  grid-column-gap: 20px;
}

justify-items

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

.container {
  justify-items: start; /* Выравнивание по левому краю */
  justify-items: end;   /* Выравнивание по правому краю */
  justify-items: center; /* Выравнивание по центру */
  justify-items: stretch; /* Растягивание (по умолчанию) */
}

align-items

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

.container {
  align-items: start;    /* Выравнивание по верхнему краю */
  align-items: end;      /* Выравнивание по нижнему краю */
  align-items: center;   /* Выравнивание по центру */
  align-items: stretch;  /* Растягивание (по умолчанию) */
  align-items: baseline; /* Выравнивание по базовой линии */
}

place-items

Сокращенное свойство для align-items и justify-items.

.container {
  place-items: center stretch; /* align-items justify-items */
  place-items: start; /* Оба значения одинаковы */
}

justify-content

Выравнивает всю сетку по горизонтали, если общий размер сетки меньше контейнера.

.container {
  justify-content: start;     /* Слева (по умолчанию) */
  justify-content: end;       /* Справа */
  justify-content: center;    /* По центру */
  justify-content: stretch;   /* Растянуть */
  justify-content: space-around;  /* Равные отступы вокруг */
  justify-content: space-between; /* Равные отступы между */
  justify-content: space-evenly;  /* Полностью равные отступы */
}

align-content

Выравнивает всю сетку по вертикали.

.container {
  align-content: start;       /* Сверху */
  align-content: end;         /* Снизу */
  align-content: center;      /* По центру */
  align-content: stretch;     /* Растянуть (по умолчанию) */
  align-content: space-around;   /* Равные отступы вокруг */
  align-content: space-between;  /* Равные отступы между */
  align-content: space-evenly;   /* Полностью равные отступы */
}

place-content

Сокращенное свойство для align-content и justify-content.

.container {
  place-content: center start; /* align-content justify-content */
}

grid-auto-columns и grid-auto-rows

Определяют размер автоматически создаваемых строк и столбцов.

.container {
  grid-auto-columns: 100px; /* Размер автоматических столбцов */
  grid-auto-rows: minmax(100px, auto); /* Размер автоматических строк */
}

grid-auto-flow

Управляет алгоритмом автоматического размещения элементов.

.container {
  grid-auto-flow: row;        /* Заполнять по строкам (по умолчанию) */
  grid-auto-flow: column;     /* Заполнять по столбцам */
  grid-auto-flow: dense;      /* Плотное заполнение пробелов */
  grid-auto-flow: row dense;  /* По строкам с плотным заполнением */
}
Далее