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

Úkolem vlastnosti place-content je specifikovat rozdělení prostoru mezi položkami na hlavní i příčné ose kontejneru pro layouty v CSS.

CSS vlastnost place-content

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

place-content je zkratkou pro vlastnosti justify-contentalign-content.

Zapisuje se takto:

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

Nastavuje výchozí hodnotu obou vlastností pro všechny položky uvnitř kontejneru.

Ve specifikaci se počítá s použitím pro grid, vícesloupcový layout, ale také flexbox, ve kterém ovšem může být využití vlastnosti justify-content vcelku omezené.

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.

Související

Jednoduchý příklad

V ukázce si hrajeme s dvousloupcovým kontejnerem 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 place-content. Využíváme zde tuto hodnotu:

.container {
  place-content: space-between end;
}

Položky zarovnáváme svisle tak, aby mezi nimi vznikla rovnoměrná mezera (space-between) a vodorovně na konec hrany kontejneru (end).

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

place-content funguje ve všech prohlížečích kromě MSIE 11.

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?