Выравнивание блоков в сетке
Спецификация выравнивания блоков описывает, как работает выравнивание в различных методах макета. На этой странице мы рассмотрим, как работает выравнивание блоков в контексте CSS-сетки.
Поскольку эта страница предназначена для подробного описания аспектов, специфичных для CSS-сетки и выравнивания блоков, её следует читать в сочетании с основной страницей выравнивания блоков, где описываются общие черты выравнивания блоков в различных методах макета.
Базовый пример
В этом примере использования сетки после размещения полос фиксированной ширины по основной оси в контейнере сетки остаётся дополнительное пространство. Это пространство распределяется с помощью justify-content. По поперечной оси выравнивание элементов внутри их областей сетки контролируется с помощью align-items. Первый элемент переопределяет значение align-items, установленное для группы, установив align-self в center.
Оси сетки
Как двухмерный метод макета, при работе с CSS-сеткой у нас всегда есть две оси, по которым мы можем выравнивать элементы. Мы имеем доступ ко всем свойствам выравнивания блоков, чтобы достичь этого.
Основная ось — это ось, соответствующая направлению, в котором слова в предложении идут в используемом режиме написания. Поэтому в горизонтальном языке, таком как английский или арабский, основное направление идёт горизонтально. Если вы используете вертикальный режим написания, основная ось будет вертикальной.
Для выравнивания элементов по основной оси используйте свойства, начинающиеся с justify-, justify-content, justify-items и justify-self.
Поперечная ось пересекает основную ось в направлении, в котором блоки отображаются вниз по странице — например, абзацы на английском языке отображаются друг под другом вертикально. Это, следовательно, размер поперечной оси.
Для выравнивания элементов по поперечной оси используйте свойства, начинающиеся с align-, align-content, align-items и align-self.
Выравнивание по себе
Эти свойства отвечают за выравнивание элемента внутри области сетки, в которую он помещён. Свойства align-items и justify-items применяются к контейнеру сетки и устанавливают свойства align-self и justify-self в качестве группы. Это означает, что вы можете установить выравнивание для всех элементов сетки сразу, а затем переопределить любые элементы, которые нуждаются в другом выравнивании, применив свойства align-self или justify-self к правилам для отдельных элементов сетки.
Начальное значение для align-self и justify-self равно stretch, поэтому элемент будет растянут на всю область сетки. Исключением из этого правила является случай, когда элемент имеет собственное соотношение сторон, например, изображение. В этом случае элемент будет выровнен по start по обеим осям, чтобы изображение не искажалось.
Выравнивание содержимого
Эти свойства отвечают за выравнивание полос сетки, когда есть дополнительное пространство для распределения. Такая ситуация возникнет, если общая ширина определённых полос будет меньше общей ширины контейнера сетки.
Интервалы и устаревшие свойства grid-gap
В спецификации сетки изначально были определены свойства grid-row-gap, grid-column-gap и grid-gap. С тех пор они были перенесены в спецификацию выравнивания блоков и переименованы в row-gap, column-gap и gap. Это позволяет использовать их для других методов макета, где интервал между элементами имеет смысл.
Обновлённые свойства ещё не реализованы во всех браузерах. Поэтому, чтобы использовать свойства интервалов в CSS-сетке, следует использовать grid-row-gap, grid-column-gap и grid-gap версии, чтобы обеспечить полную совместимость. Можно дублировать свойства и использовать оба, как вы бы делали с префиксами для разных браузеров.
Справочник
Свойства CSS
Элементы глоссария
Руководства
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout
