Выравнивание блоков в сетке

При работе с сеткой у вас есть две оси для выравнивания элементов — ось блоков и ось строк. Ось блоков — это ось, по которой блоки выстраиваются в блочной компоновке. Если у вас есть два абзаца на странице, они отображаются один под другим, поэтому это направление, которое мы описываем как ось блоков.

Ось строк проходит через ось блоков, это направление, в котором идёт текст в обычном потоке строк.

Мы можем выровнять содержимое внутри областей сетки и сами дорожки сетки по этим двум осям.

Свойства align-self и align-items управляют выравниванием по оси блоков. Когда мы используем эти свойства, мы изменяем выравнивание элемента внутри области сетки, в которую вы его поместили.

В следующем примере у меня есть четыре области сетки в моей сетке. Я могу использовать свойство align-items для контейнера сетки, чтобы выровнять элементы, используя одно из следующих значений:

• auto
• normal
• start
• end
• center
• stretch
• baseline
• first baseline
• last baseline

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
  align-items: start;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Помните, что после установки align-items: start, высота каждого дочернего элемента <div> будет определяться содержимым <div>. Это в отличие от полного пропуска align-items, в котором высота каждого <div> растягивается, чтобы заполнить его область сетки.

Свойство align-items устанавливает свойство align-self для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя align-self для элемента сетки.

В этом следующем примере я использую свойство align-self для демонстрации различных значений выравнивания. Первая область показывает поведение по умолчанию align-self, которое заключается в растяжении. Второй элемент имеет значение align-self равное start, третий end и четвёртый center.

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
  align-self: start;
}
.item3 {
  grid-area: c;
  align-self: end;
}
.item4 {
  grid-area: d;
  align-self: center;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Спецификация указывает, что поведение по умолчанию в align-self заключается в растяжении, за исключением элементов, имеющих внутреннее соотношение сторон, в этом случае они ведут себя как start. Причина этого заключается в том, что если элементы с соотношением сторон установлены на растяжение, это значение по умолчанию исказит их.

Это поведение теперь уточнено в спецификации, но браузеры ещё не реализовали правильное поведение. До тех пор, пока это не произойдёт, можно гарантировать, что элементы, такие как изображения, которые являются непосредственными потомками сетки, не будут растягиваться, установив align-self и justify-self в значение start. Это имитирует правильное поведение после реализации.

Так как align-items и align-self отвечают за выравнивание элементов по оси блоков, justify-items и justify-self выполняют ту же функцию на оси строк. Значения, которые вы можете выбрать, такие же, как и для align-self.

• auto
• normal
• start
• end
• center
• stretch
• baseline
• first baseline
• last baseline

Ниже приведён тот же пример, что и для align-items, но на этот раз мы применяем свойство justify-self.

Опять же, значение по умолчанию — stretch, за исключением элементов с внутренним соотношением сторон. Это означает, что по умолчанию элементы сетки будут занимать свою область сетки, если вы не измените это, установив значение выравнивания. Первый элемент в примере демонстрирует это выравнивание по умолчанию:

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
  justify-self: start;
}
.item3 {
  grid-area: c;
  justify-self: end;
}
.item4 {
  grid-area: d;
  justify-self: center;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

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

Свойства justify-self и justify-items не реализованы в гибкой компоновке. Это связано с одномерной природой гибкой компоновки и тем, что может быть несколько элементов вдоль оси, что делает невозможным выравнивание одного элемента. Для выравнивания элементов по основной оси строк в гибкой компоновке используется свойство justify-content.

Свойство place-items является сокращённой записью для align-items и justify-items.

Свойство place-self является сокращённой записью для align-self и justify-self.

Комбинируя свойства выравнивания и выравнивания по оси, мы можем легко центрировать элемент внутри области сетки.

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas:
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
</div>

Если у вас есть ситуация, когда ваши дорожки сетки используют область, меньшую, чем контейнер сетки, то вы можете выровнять сами дорожки сетки внутри этого контейнера. Опять же, это работает на осях блока и строки, где align-content выравнивает дорожки по оси блока, а justify-content выполняет выравнивание по оси строки. Свойство place-content является сокращением для align-content и justify-content. Значения для align-content, justify-content и place-content:

• normal
• start
• end
• center
• stretch
• space-around
• space-between
• space-evenly
• baseline
• first baseline
• last baseline

В примере ниже у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 дорожки строк и столбцов, каждая по 100 пикселей с отступом 10 пикселей. Это означает, что внутри контейнера сетки есть место как по оси блока, так и по оси строки.

Свойство align-content применяется к контейнеру сетки, так как оно работает со всей сеткой.

По умолчанию в макете сетки start, поэтому наши дорожки сетки находятся в верхнем левом углу сетки, выровненные по начальным линиям сетки:

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Если я добавлю align-content в мой контейнер со значением end, все дорожки сместятся к конечной линии контейнера сетки по оси блока:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
  align-content: end;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Мы также можем использовать значения для этого свойства, с которыми вы, возможно, знакомы по flexbox; значения распределения пробелов space-between, space-around и space-evenly. Если мы обновим align-content на space-between, вы увидите, как элементы в нашей сетке распределяются:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
  align-content: space-between;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Стоит отметить, что использование этих значений распределения пробелов может привести к увеличению элементов в вашей сетке. Если элемент охватывает более одной дорожки сетки, по мере добавления дополнительного пространства между дорожками, этот элемент должен увеличиться в размерах, чтобы поглотить пространство. Мы всегда работаем в строгой сетке. Поэтому, если вы решите использовать эти значения, убедитесь, что содержимое ваших дорожек может справиться с дополнительным пространством или что вы использовали свойства выравнивания для элементов, чтобы заставить их переместиться к началу, а не растянуться.

На изображении ниже я разместил сетку с align-content, со значением start рядом с сеткой, когда align-content имеет значение space-between. Вы можете увидеть, как элементы 1 и 2, занимающие две дорожки строк, увеличили свою высоту, так как к промежутку между этими двумя дорожками добавлено дополнительное пространство:

По оси строки мы можем использовать justify-content для выполнения того же типа выравнивания, которое мы использовали align-content для оси блока.

Используя тот же пример, я устанавливаю justify-content на space-around. Это снова приводит к тому, что дорожки, которые охватывают более одного столбца, приобретают дополнительное пространство:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
  align-content: space-between;
  justify-content: space-around;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Еще один способ выравнивания элементов внутри их области — использование автоматических отступов. Если вы когда-либо центрировали свой макет в окне просмотра, установив правый и левый отступы контейнерного блока на auto, вы знаете, что автоматический отступ поглощает всё доступное пространство. Установив отступ на auto с обеих сторон, вы выталкиваете блок в центр, поскольку оба отступа стремятся занять всё пространство.

В этом следующем примере я присвоил элементу 1 левый отступ auto. Вы можете увидеть, как содержимое теперь сместилось вправо от области, поскольку автоматический отступ занимает оставшееся пространство после того, как было выделено место для содержимого этого элемента:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
  margin-left: auto;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Вы можете увидеть, как элемент выровнен, используя подсветку сетки Firefox:

Во всех этих примерах я работал на английском языке, который является языком слева направо. Это означает, что наши начальные линии находятся сверху и слева от нашей сетки, если мы думаем о физических направлениях.

Макет CSS-сетки и спецификация выравнивания блоков разработаны для работы с режимами написания в CSS. Это означает, что если вы работаете на языке справа налево, например, на арабском языке, началом сетки будет верхний правый угол, поэтому значение по умолчанию justify-content: start будет для того, чтобы дорожки сетки начинались справа от сетки.

Установка автоматических отступов, использование margin-right или margin-left или абсолютное позиционирование элементов с помощью top, right, bottom и left смещений не учитывает режимы написания. В следующем руководстве мы подробнее рассмотрим взаимодействие между макетом CSS-сетки, выравниванием блоков и режимами написания. Это будет важно для понимания, если вы разрабатываете сайты, которые затем отображаются на нескольких языках, или если вы хотите смешивать языки или режимы написания в дизайне.