Właściwość CSSGrid
place-items
Skrót ustawiający align-items i justify-items jednocześnie.
- Wartość domyślna
normal legacy- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy, efekt widać w kontenerach grid
- JavaScript
element.style.placeItems = "center"
Przykład
#CSS
.hero {
display: grid;
place-items: center;
min-height: 140px;
}HTML przykładu
<section class="hero stage">
<strong>Idealnie na środku</strong>
</section>Podgląd
Definicja i zastosowanie
#Właściwość place-items łączy wyrównanie w pionie (align-items) i w poziomie (justify-items). Jedna wartość ustawia obie osie, dwie wartości ustawiają kolejno pion i poziom.
Najsłynniejsze zastosowanie to wyśrodkowanie treści: display: grid; place-items: center; stawia element dokładnie na środku kontenera w obu osiach. Dwie linijki kodu zamiast dawnych sztuczek.
We Flexboxie działa tylko część align-items, bo justify-items jest tam ignorowane.
Składnia
#Składnia
place-items: <align-items> <justify-items>?;Wartości
#- Elementy wypełniają całe komórki.
- Elementy na środku komórek w obu osiach.
- U góry w pionie i przy prawej krawędzi w poziomie.
- Na dole i na środku w poziomie.
Wartości w praktyce
#stretch
Elementy wypełniają całe komórki.
.demo { place-items: stretch; }center
Elementy na środku komórek w obu osiach.
.demo { place-items: center; }start end
U góry w pionie i przy prawej krawędzi w poziomie.
.demo { place-items: start end; }end center
Na dole i na środku w poziomie.
.demo { place-items: end 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
#display: grid; place-items: center;to najkrótszy sposób na wyśrodkowanie czegokolwiek w obu osiach.- Kolejność dwóch wartości to najpierw pion (align), potem poziom (justify).
Powiązane hasła
#- align-itemsWyrównuje elementy na osi poprzecznej kontenera flex lub grid.
- justify-itemsWyrównuje wszystkie elementy w ich komórkach wzdłuż osi poziomej.
- place-contentSkrót ustawiający align-content i justify-content jednocześnie.
- place-selfSkrót ustawiający align-self i justify-self pojedynczego elementu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.