Выравнивание сетки GRID в CSS осуществляется с использованием свойства justify-content для горизонтального выравнивания и свойства align-content для вертикального выравнивания.
Первый шаг для выравнивания сетки GRID - это определение контейнера, который будет содержать сетку. Для этого используется свойство display с значением grid. Например:
.grid-container {
display: grid;
}
Затем можно задать размеры и позиционирование ячеек сетки, используя свойство grid-template-rows и grid-template-columns. Например:
.grid-container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 200px 200px;
}
Теперь можно приступить к выравниванию сетки.
Горизонтальное выравнивание Grid осуществляется с помощью свойства justify-content. Свойство justify-content принимает следующие значения:
- start: все ячейки выравниваются по левому краю контейнера.
- end: все ячейки выравниваются по правому краю контейнера.
- center: все ячейки выравниваются по центру контейнера.
- space-between: ячейки равномерно распределяются по контейнеру, с равным расстоянием между ними.
- space-around: ячейки равномерно распределяются по контейнеру, с равным расстоянием как между ними, так и по краю контейнера.
- space-evenly: ячейки равномерно распределяются по контейнеру, с равным расстоянием как между ними, так и по краю контейнера, причем, расстояния между ячейками равны.
Например, чтобы выровнять сетку по центру горизонтально, нужно добавить следующее правило:
.grid-container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 200px 200px;
justify-content: center;
}
Вертикальное выравнивание может быть установлено с помощью свойства align-content. Свойство align-content принимает те же значения, что и justify-content, но для вертикального выравнивания. Так, например, чтобы выровнять сетку по центру вертикально, нужно добавить следующее правило:
.grid-container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 200px 200px;
justify-content: center;
align-content: center;
}
С помощью свойств justify-items и align-items можно также выравнивать содержимое ячеек внутри сетки по горизонтали и вертикали соответственно.
Важно отметить, что выравнивание сетки будет работать только внутри контейнера с определенными размерами. Если контейнер автоматически растягивается под размер содержимого, выравнивание может не сработать. В таком случае следует задать размеры контейнера явно.
Используя вышеописанные методы, вы сможете выровнять сетку GRID в CSS по горизонтали и вертикали в соответствии с вашими потребностями.