Как выравнить элементы в grid?

Для выравнивания элементов в сетке (grid) в CSS можно использовать несколько свойств и методов. Они позволяют задать горизонтальное и вертикальное выравнивание элементов внутри грид-контейнера.

1. Горизонтальное выравнивание:
-justify-itemsопределяет горизонтальное выравнивание для всех элементов в грид-контейнере. Возможные значения:start(выравнивание по левому краю),end(выравнивание по правому краю),center(выравнивание по центру),stretch(растяжение элементов по ширине).
-justify-selfопределяет горизонтальное выравнивание для каждого отдельного элемента в грид-контейнере. Оно имеет те же значения, что иjustify-items.

2. Вертикальное выравнивание:
-align-itemsопределяет вертикальное выравнивание для всех элементов в грид-контейнере. Возможные значения:start(выравнивание по верхнему краю),end(выравнивание по нижнему краю),center(выравнивание по центру),stretch(растяжение элементов по высоте).
-align-selfопределяет вертикальное выравнивание для каждого отдельного элемента в грид-контейнере. Оно имеет те же значения, что иalign-items.

Пример использования:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  justify-items: center; /* Горизонтальное выравнивание элементов */
  align-items: center; /* Вертикальное выравнивание элементов */
}

.grid-item {
  background-color: #ccc;
  padding: 10px;
  text-align: center;
}

В данном примере мы создаем грид-контейнер с 3 колонками и выравниваем элементы по центру по горизонтали и вертикали. Элементы будут иметь одинаковый отступ между собой и фоновый цвет #ccc.

Вы также можете использоватьjustify-selfиalign-selfдля индивидуального выравнивания определенных элементов внутри грид-контейнера:

.grid-item:nth-child(1) {
  justify-self: start; /* Выравнивание элемента по левому краю по горизонтали */
  align-self: end; /* Выравнивание элемента по нижнему краю по вертикали */
}

.grid-item:nth-child(2) {
  justify-self: center; /* Выравнивание элемента по центру по горизонтали */
  align-self: center; /* Выравнивание элемента по центру по вертикали */
}

.grid-item:nth-child(3) {
  justify-self: end; /* Выравнивание элемента по правому краю по горизонтали */
  align-self: start; /* Выравнивание элемента по верхнему краю по вертикали */
}

В этом примере мы используем псевдоэлементnth-childдля выбора каждого отдельного элемента и задания индивидуальных значений дляjustify-selfиalign-self.

Таким образом, с помощью свойствjustify-items,justify-self,align-itemsиalign-selfможно детально контролировать выравнивание элементов в грид-контейнере.