Как правило, большинство свойств выравнивания работают с элементами сетки так же, как и с другими элементами. Но есть и такие свойства выравнивания, которые применяются только к гридам и флексам. Вот их обзор.
Свойство align-items
Свойство align-items задаёт значение align-self по умолчанию для всех элементов сетки, участвующих в контексте форматирования контейнера сетки.
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100vh;
grid-gap: 10px;
align-items: center;
background-color: beige;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
height: 40%;
}
.green {
background: yellowgreen;
height: 60%;
}
.blue {
background: steelblue;
height: auto;
}
body {
margin: 0;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
В данном примере мы применяем align-items: center к контейнеру сетки, поэтому все элементы сетки выравниваются по центру блочной оси.
Поскольку align-items устанавливает значение по умолчанию, любой из элементов сетки может отменить его с помощью свойства align-self.
Свойство align-self
Свойство align-self выравнивает блок внутри содержащего его блока по оси блока/столбца или поперечной оси.
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100vh;
grid-gap: 10px;
align-items: center;
background-color: beige;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
height: 40%;
align-self: baseline;
}
.green {
background: yellowgreen;
height: 60%;
}
.blue {
background: steelblue;
height: auto;
align-self: stretch;
}
body {
margin: 0;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
Здесь красный элемент сетки имеет значение baseline, а синий элемент — значение stretch. Высота синего элемента имеет значение auto, поэтому он растягивается на всю высоту области сетки.
Однако мы не задали значение для зелёного элемента. Поэтому он использует значение по умолчанию, которое в данном случае установлено как center с помощью align-items для контейнера сетки.
Свойство justify-items
Свойство justify-items задаёт значение justify-self по умолчанию для всех элементов сетки, участвующих в контексте форматирования контейнера сетки.
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
justify-items: center;
background-color: beige;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
width: 20%;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
Свойство justify-self
Свойство justify-self можно использовать для выравнивания отдельного элемента сетки по оси строки или главной оси.
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
justify-items: center;
background-color: beige;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
width: 20%;
}
.red {
background: orangered;
justify-self: end;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
justify-self: start;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
Свойство justify-content
Свойство justify-content выравнивает содержимое контейнера сетки целиком по оси строки или главной оси.
Это свойство можно использовать для выравнивания всей сетки внутри контейнера сетки в случае, если дорожки сетки занимают меньше места, чем их контейнер. Это может произойти, если вы задали размер дорожки в абсолютных единицах (например, пикселях), а контейнер сетки занимает больше места, чем все дорожки вместе взятые.
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
grid-template-columns: 100px;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
justify-content: center;
background-color: beige;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
width: 20px;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
width: 40px;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
Свойство align-content
Свойство align-content работает аналогично justify-content, за исключением того, что это свойство выравнивает по оси блока или поперечной оси.
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px;
grid-gap: 10px;
align-content: center;
background-color: beige;
height: 100vh;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
height: 20px;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
height: 40px;
}
body {
margin: 0;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
Свойство place-content
Свойство place-content — это сокращение для justify-content и align-content.
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
grid-template-columns: 60px 60px 60px;
grid-template-rows: 100px;
grid-gap: 10px;
place-content: center end;
background-color: beige;
height: 100vh;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
height: 20px;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
height: 40px;
}
body {
margin: 0;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
Свойство place-items
Свойство place-items — это сокращение для justify-items и align-items.
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100vh;
grid-gap: 10px;
place-items: end center;
background-color: beige;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
height: 40%;
}
.green {
background: yellowgreen;
height: 60%;
}
.blue {
background: steelblue;
height: auto;
}
body {
margin: 0;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
Свойство place-self
Свойство place-self — это сокращение для justify-self и align-self.
<!DOCTYPE html>
<html lang="ru">
<title>Пример</title>
<style>
#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100vh;
grid-gap: 10px;
background-color: beige;
}
#grid > div {
padding: 20px;
font-size: 4vw;
color: white;
}
.red {
background: orangered;
height: 40%;
place-self: end;
}
.green {
background: yellowgreen;
height: 60%;
place-self: start center;
}
.blue {
background: steelblue;
height: auto;
place-self: center start;
}
body {
margin: 0;
}
</style>
<div id="grid">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>