Właściwość CSSGrid
place-self
Skrót ustawiający align-self i justify-self pojedynczego elementu.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- elementy grid, elementy flex (tylko pion) i elementy pozycjonowane absolutnie
- JavaScript
element.style.placeSelf = "center"
Przykład
#CSS
.tile {
display: grid;
grid-template-columns: 1fr;
}
.tile .badge {
grid-area: 1 / 1;
place-self: start end;
}HTML przykładu
<div class="tile stage" style="display: grid;">
<div class="box" style="grid-area: 1 / 1; height: 90px;">Moduł 5</div>
<span class="badge" style="grid-area: 1 / 1; place-self: start end; margin: 6px; padding: 2px 8px; border-radius: 99px; background: #f43f5e; font-size: 12px;">Nowy</span>
</div>Podgląd
Definicja i zastosowanie
#Właściwość place-self łączy wyrównanie elementu w pionie (align-self) i w poziomie (justify-self). Ustawiasz ją na konkretnym elemencie siatki, żeby ustawić go w komórce inaczej niż pozostałe.
Jedna wartość działa w obu osiach, więc place-self: center wyśrodkowuje element w jego komórce. Dwie wartości podajesz w kolejności: pion, potem poziom.
W elementach flex działa tylko część pionowa, bo justify-self jest tam ignorowane.
Składnia
#Składnia
place-self: <align-self> <justify-self>?;Wartości
#- Element słucha wyrównania kontenera i się rozciąga.
- Element 2 na środku swojej komórki.
- Element 2 w prawym dolnym rogu komórki.
- U góry i na środku w poziomie.
Wartości w praktyce
#auto
Element słucha wyrównania kontenera i się rozciąga.
.target { place-self: auto; }center
Element 2 na środku swojej komórki.
.target { place-self: center; }end
Element 2 w prawym dolnym rogu komórki.
.target { place-self: end; }start center
U góry i na środku w poziomie.
.target { place-self: start center; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nakładanie elementów w tej samej komórce (
grid-area: 1 / 1) zplace-selfto wygodna alternatywa dlaposition: absolute. - Kolejność wartości: najpierw pion (align), potem poziom (justify).
Powiązane hasła
#- align-selfNadpisuje wyrównanie jednego elementu na osi poprzecznej.
- justify-selfWyrównuje pojedynczy element w jego komórce siatki wzdłuż osi poziomej.
- place-itemsSkrót ustawiający align-items i justify-items jednocześnie.
- grid-areaPrzypisuje element do nazwanego obszaru siatki albo ustawia jego wiersze i kolumny naraz.
Widzisz błąd albo brakuje przykładu? Napisz do nas.