Właściwość CSSGrid

place-content

Skrót ustawiający align-content i justify-content jednocześnie.

Wartość domyślna: normal
Dziedziczona: Nie
Animowalna: nie
Dotyczy: kontenery grid, kontenery flex z wieloma liniami i kontenery wielokolumnowe
JavaScript: element.style.placeContent = "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

.board {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  place-content: center;
  gap: 6px;
  height: 180px;
}

Podgląd

Definicja i zastosowanie

Właściwość place-content łączy align-content (pion) i justify-content (poziom). Rozmieszcza całą zawartość kontenera, czyli całe wiersze i kolumny siatki albo linie elementów flex, gdy zostaje wolne miejsce.

Różnica względem place-items jest subtelna, ale ważna: place-items wyrównuje elementy w ich komórkach, a place-content przesuwa całą siatkę wewnątrz kontenera.

Jedna wartość ustawia obie osie. Wyjątkiem są wartości oparte na linii bazowej, które dotyczą tylko pionu.

Składnia

place-content: <align-content> <justify-content>?;

Wartości

normal
Siatka stoi w lewym górnym rogu.
center
Cała siatka na środku kontenera.
end start
Siatka na dole, przy lewej krawędzi.
space-between
Wiersze i kolumny rozchodzą się do krawędzi.

Wartość	Opis
normal	Siatka stoi w lewym górnym rogu.
center	Cała siatka na środku kontenera.
end start	Siatka na dole, przy lewej krawędzi.
space-between	Wiersze i kolumny rozchodzą się do krawędzi.

Wartości w praktyce

normal

Siatka stoi w lewym górnym rogu.

.demo { place-content: normal; }

center

Cała siatka na środku kontenera.

.demo { place-content: center; }

end start

Siatka na dole, przy lewej krawędzi.

.demo { place-content: end start; }

space-between

Wiersze i kolumny rozchodzą się do krawędzi.

.demo { place-content: space-between; }

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

Gdy siatka ma stałe wymiary mniejsze od kontenera, place-content: center wyśrodkuje ją w całości.
Jeśli chcesz wyrównać elementy w komórkach, a nie całą siatkę, sięgnij po place-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