Свойство justify-self
Свойство justify-self позволяет выравнивать конкретный элемент grid сетки внутри столбца
justify-self: end;Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
justify-self: auto;
Автоматическое выравнивание элемента grid сетки внутри столбца
<div class="grid-1">
<div class="grid-1-col bg-green">1</div>
<div class="grid-1-col grid-1-col-auto bg-red">2</div>
<div class="grid-1-col bg-green">3</div>
</div>
<style>
.grid-1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
.grid-1-col {
padding: 1rem;
}
.grid-1-col-auto {
justify-self: auto;
}
</style>1
2
3
justify-self: start;
Выравнивает элемент grid сетки в начале столбца
<div class="grid-2">
<div class="grid-2-col bg-green">1</div>
<div class="grid-2-col grid-2-col-start bg-red">2</div>
<div class="grid-2-col bg-green">3</div>
</div>
<style>
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
.grid-2-col {
padding: 1rem;
}
.grid-2-col-start {
justify-self: start;
}
</style>1
2
3
justify-self: end;
Выравнивает элемент grid сетки в конце столбца
<div class="grid-3">
<div class="grid-3-col bg-green">1</div>
<div class="grid-3-col grid-3-col-end bg-red">2</div>
<div class="grid-3-col bg-green">3</div>
</div>
<style>
.grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
.grid-3-col {
padding: 1rem;
}
.grid-3-col-end {
justify-self: end;
}
</style>1
2
3
justify-self: center;
Выравнивает элемент grid сетки по центру столбца
<div class="grid-4">
<div class="grid-4-col bg-green">1</div>
<div class="grid-4-col grid-4-col-center bg-red">2</div>
<div class="grid-4-col bg-green">3</div>
</div>
<style>
.grid-4 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
.grid-4-col {
padding: 1rem;
}
.grid-4-col-center {
justify-self: center;
}
</style>1
2
3