Właściwość CSSGrid

justify-items

Wyrównuje wszystkie elementy w ich komórkach wzdłuż osi poziomej.

Wartość domyślna: legacy
Dziedziczona: Nie
Animowalna: nie
Dotyczy: wszystkie elementy, efekt widać w kontenerach grid
JavaScript: element.style.justifyItems = "center"

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Wartości
Wartości w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}

Podgląd

Definicja i zastosowanie

Właściwość justify-items ustawia się na kontenerze grid. Decyduje, jak każdy element układa się w swojej komórce w poziomie: rozciąga się na całą szerokość komórki, przylega do lewej, do prawej albo staje na środku.

Domyślnie elementy siatki się rozciągają. Zmiana na start czy center sprawia, że element ma szerokość swojej treści, a reszta komórki zostaje pusta.

We Flexboxie ta właściwość nie działa, bo tam na osi głównej rozmieszcza się elementy przez justify-content i marginesy.

Składnia

justify-items: normal | stretch | start | end | center | legacy;

Wartości

stretch
Elementy wypełniają całą szerokość komórek.
start
Elementy przylegają do lewej krawędzi komórek.
center
Elementy stoją na środku komórek.
end
Elementy przylegają do prawej krawędzi komórek.

Wartość	Opis
stretch	Elementy wypełniają całą szerokość komórek.
start	Elementy przylegają do lewej krawędzi komórek.
center	Elementy stoją na środku komórek.
end	Elementy przylegają do prawej krawędzi komórek.

Wartości w praktyce

stretch

Elementy wypełniają całą szerokość komórek.

.demo { justify-items: stretch; }

start

Elementy przylegają do lewej krawędzi komórek.

.demo { justify-items: start; }

center

Elementy stoją na środku komórek.

.demo { justify-items: center; }

end

Elementy przylegają do prawej krawędzi komórek.

.demo { justify-items: end; }

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

Do wyrównania jednego elementu inaczej niż pozostałych użyj justify-self na tym elemencie.
Skrót place-items ustawia naraz align-items i justify-items.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs