Martin Michálek Martin Michálek  – 4. 12. 2020

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

Vlastnost place-items

Jde totiž o zkratku pro vlastnosti justify-itemsalign-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 ignorována.

Související

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).

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 kromě výjimek od Microsoftu – původního Edge, který již ale není příliš rozšířená a IE11, který je na tom podobně. Předpokládám ale, že Autoprefixer si s touhle vlastností poradí.

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

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?

Dotazník: Jak
se vzděláváte online?
5 minut vašeho času.
Velká pomoc pro nás.
Vyplnit →