Свойство 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

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии