CSS Lastnost: justify-items

Lastnost justify-items je nastavljena na mrežnem vsebniku, da omogoči podrejenim elementom poravnavo v smeri vrstice. Da bi imela ta lastnost kakršen koli učinek poravnave, elementi potrebujejo razpoložljiv prostor okoli sebe v smeri vrstice. Če želimo elemente poravnati v smeri bloka, uporabimo lastnost align-items. Glede na CSS specifikacijo so za justify-items podprte naslednje vrednosti:

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>justify-items</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        div {
            display: grid;
            grid-template-columns: auto auto auto auto;
            justify-items: start;
            aspect-ratio: 3/2;
            border-radius: 6px;
            color: #333333;
        }
        div.a {
            background: greenyellow;
            width: 25%;
        }
        div.b {
            background: orange;
            width: 50%;
        }
        div.c {
            background: pink;
            width: 75%;
        }
        div.d {
            background: lightblue;
            width: 100%;
        }
    </style>
</head>
<body>
<div>
    <div class="a">zeleno rumena</div>
    <div class="b">oranžna</div>
    <div class="c">roza</div>
    <div class="d">svetlo modra</div>
</div>
</body>
</html>

REZULTAT

Osnovne vrednosti

start: Poravna vsebino na začetek mrežne celice.
end: Poravna vsebino na konec mrežne celice (tj. desna stran pri vodoravni osi).
center: Poravna vsebino na sredino mrežne celice.
stretch (privzeto): Raztegne vsebino, da zapolni celotno širino mrežne celice (če širina ni določena).

Dodatne vrednosti

inherit: Podeduje vrednost od starševskega elementa.
initial: Nastavi vrednost na privzeto (kar je stretch).
unset: Če vrednost ni dedna, uporabimo privzeto.

Kaj pa right, left in druge vrednosti?

Vrednosti, kot so right, left, baseline, normal in podobne, niso uradno podprte za lastnost justify-items. Te vrednosti morda delujejo (ali vsaj delno) v nekaterih brskalnikih zaradi eksperimentalne narave ali starih različic standarda, vendar niso del trenutne CSS Grid specifikacije.

Vsi primeri justify-items

baseline	Element je poravnan z osnovno črto nadrejenega.	Glej primer
center	Poravna elemente na sredino.	Glej primer
end	Poravna elemente na konec.	Glej primer
inherit	Podeduje lastnost od nadrejenega elementa.	Glej primer
initial	Nastavi na privzeto vrednost.	Glej primer
left	Poravna elemente na levo.	Glej primer
legacy	Mrežni elementi z vrednostjo justify-self samodejno podedujejo vrednost.	Glej primer
normal	Odvisno od konteksta postavitve, vendar podobno kot stretch za mrežno postavitev.	Glej primer
right	Poravna elemente na desno.	Glej primer
start	Poravna elemente na začetek v smeri vrstice.	Glej primer
stretch	Raztegne, da zapolni mrežno celico, če velikost v vrstici ni nastavljena.	Glej primer