Vlastnost place-items
na kontejneru layoutu definuje zarovnání položek na hlavní ose i příčné ose pro layouty v CSS.
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
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?