Vlastnost place-items: Zarovnání všech položek na obou osách

Martin Michálek – 4. 12. 2020

Vlastnost place-items na kontejneru layoutu definuje zarovnání položek na hlavní ose i příčné ose.

CSS vlastnost place-items

Vlastnost place-items patří do specifikace pro zarovnání boxů – CSS Box Alignment.

Můžete ji využít v layoutech tvořených gridem.

Jde totiž o zkratku pro vlastnosti justify-items a align-items.

Zapisuje se takto:

place-items: <hodnota align-items> <hodnota justify-items>;

Nastavuje výchozí hodnotu obou vlastností pro všechny položky uvnitř kontejneru. Pokud v deklaraci neuvedete druhou hodnotu, použije se první hodnota pro obě vlastnosti, ale jen za předpokladu, že je pro obě vlastnosti platná. Pokud tomu tak není, máme smůlu a bude neplatná celá deklarace.

Dává smysl hlavně pro CSS grid, protože ve flexboxu je vlastnost justify-items a díky tomu i zkratka place-items ignorována.

Jednoduchý příklad

V naší ukázce definujeme třísloupcový kontejner gridu. Všechny tři položky mají omezenou výšku i šířku, aby byl hezky vidět efekt zarovnání, který způsobuje vlastnost justify-items. Využíváme zde tuto hodnotu:

.container {
  place-items: end right;
}

Jak jste asi poznali, položky zarovnáváme svisle dolů (end) a vodorovně doprava (right).

place-items: end right v Chrome při zapnutém grid overlay

Možné hodnoty

Podívejte se na referenční příručku k oběma vlastnostem, pro které je place-items zkratkou:

Podpora v prohlížečích

Použití ve flexboxu smysl nedává, ale v rámci CSS gridu má place-items velmi slušnou podporu ve všech moderních prohlížečích. IE11 vlastnost nepodporuje, to ale nevadí.

Pro více informací se podívejte na caniuse.com/place-items.