CSS place-self — вирівнювання одного елемента сітки

CSS властивість place-self — скорочення для align-self і justify-self: вирівнювання одного елемента, що перекриває задане контейнером.

правити

Загальний опис

Контейнер задає правило для всіх (place-items), а окремий елемент через place-self робить виняток для себе: усі притиснуті до верху — цей центрується.

Значень два (вертикаль, горизонталь) або одне на обидві осі. place-self: end — правий нижній кут комірки.

У флексі працює лише вертикальна половина (align-self): горизонтального justify-self там не існує — по головній осі елементами керує контейнер.

правити

+ додати пораду чи нотатку

Переглядачі

Переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

<div class="grid">
    <div>1</div>
    <div class="rebel">2</div>
    <div>3</div>
</div>

.grid {
    display: grid;
    grid-template-columns: repeat(3, 80px);
    height: 140px;
    place-items: start;
    border: 1px dashed #999;
}

.grid div { background: #eef6ff; padding: .25rem .5rem; }

.rebel {
    /* виняток: правий нижній кут своєї комірки */
    place-self: end;
    background: #0172ad;
    color: #fff;
}