Proprietà CSS justify-items
La proprietà CSS justify-items imposta l'allineamento predefinito degli elementi della griglia sull'asse inline (riga). Vedi tutti i valori con esempi live.
La proprietà CSS justify-items imposta l'allineamento predefinito per ogni elemento all'interno di un contenitore lungo l'asse inline (riga) — in una lingua da sinistra a destra, ciò corrisponde alla direzione orizzontale. Viene impostata sul contenitore e agisce come valore predefinito di justify-self per tutti i suoi figli contemporaneamente. Ogni singolo elemento può comunque sovrascrivere tale valore predefinito con il proprio valore justify-self.
In un CSS Grid, justify-items controlla dove si posiziona ogni elemento orizzontalmente all'interno della propria cella della griglia — a sinistra, a destra, al centro o esteso per riempire la cella. La proprietà complementare align-items fa lo stesso lungo l'asse block (colonna), e la proprietà abbreviata place-items imposta entrambe in una sola dichiarazione.
Quando usarla
Usa justify-items ogni volta che hai una griglia e vuoi che tutte le celle condividano lo stesso posizionamento orizzontale senza dover scrivere justify-self su ogni elemento. Casi tipici:
- Centrare il contenuto in ogni cella della griglia (
center). - Spingere le celle verso il bordo iniziale o finale (
start/end). - Lasciare che gli elementi si estendano per riempire tutta la larghezza della cella (
stretch, impostazione predefinita della griglia).
Nota:
justify-itemssi applica ai contenitori griglia e agli elementi con posizionamento assoluto. Viene ignorata in Flexbox — usajustify-contentper distribuire gli elementi flex lungo l'asse principale.
| Valore iniziale | auto |
|---|---|
| Si applica a | Contenitori griglia ed elementi con posizionamento assoluto. |
| Ereditata | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.justifyItems = "start"; |
Sintassi
Valori CSS justify-items
justify-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first-baseline | last-baseline | stretch | safe | unsafe | legacy | initial | inherit;Esempio: justify-items con il valore "start"
Esempio di codice CSS justify-items
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: start;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Risultato
Con justify-items: start, ogni elemento viene allineato al bordo sinistro della propria cella della griglia. Cambia il valore in center, end o stretch (sotto) per vedere gli elementi spostarsi all'interno delle stesse celle.
Esempio: justify-items con il valore "center"
Esempio CSS justify-items center
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: center;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Esempio: justify-items con il valore "first-baseline"
Esempio della proprietà justify-items con il valore "first-baseline":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.container {
display: grid;
padding-top: 10px;
height: 250px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
background: #ccc;
justify-items: first-baseline;
}
.item {
width: 50%;
height: 50%;
text-align: center;
}
.item1 {
background: red;
}
.item2 {
background: blue;
}
.item3 {
background: green;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div class="container">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
</div>
</body>
</html>Esempio: justify-items con il valore "self-end"
Esempio della proprietà justify-items con il valore "self-end":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
justify-items: self-end;
background-color: #cccccc;
}
#example > div {
padding: 10px;
font-size: 20px;
color: white;
width: 100px;
height: 50px;
}
.one {
background-color: #1c87c9;
}
.two {
background-color: #8ebf42;
}
.three {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Justify-items property example</h2>
<div id="example">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| auto | Se il box non ha un genitore o è posizionato in modo assoluto, il valore auto rappresenta normal. |
| normal | L'effetto dipende dalla modalità di layout: • Layout a blocchi: si comporta come start. • Layout con posizionamento assoluto: si comporta come start per gli elementi sostituiti, e come stretch per gli altri. • Celle di tabella: ignorato. • Flexbox: ignorato. • Layout griglia: si comporta come stretch, eccetto per gli elementi con un rapporto d'aspetto o una dimensione intrinseca, dove si comporta come start. |
| start | Tutti gli elementi sono posizionati contro il bordo iniziale (sinistro) del contenitore. |
| end | Tutti gli elementi sono posizionati contro il bordo finale (destro) del contenitore. |
| flex-start | Gli elementi vengono posizionati all'inizio del contenitore. |
| flex-end | Gli elementi vengono posizionati alla fine del contenitore. |
| self-start | L'elemento può posizionarsi sul bordo del contenitore in base al proprio lato iniziale. |
| self-end | L'elemento può posizionarsi sul bordo del contenitore in base al proprio lato finale. |
| center | Gli elementi sono posizionati uno accanto all'altro verso il centro del contenitore. |
| left | Gli elementi sono posizionati uno accanto all'altro verso il lato sinistro del contenitore. Se l'asse della proprietà non è parallelo all'asse inline, questo valore si comporta come end. |
| right | Gli elementi sono posizionati uno accanto all'altro verso il lato destro del contenitore. Se l'asse della proprietà non è parallelo all'asse inline, questo valore si comporta come start. |
| baseline | Allinea tutti gli elementi di un gruppo facendo coincidere le loro linee di base di allineamento. |
| first-baseline | Allinea tutti gli elementi di un gruppo facendo coincidere le loro prime linee di base di allineamento. |
| last-baseline | Allinea tutti gli elementi di un gruppo facendo coincidere le loro ultime linee di base di allineamento. |
| stretch | Estende l'elemento per adattarlo al contenitore lungo l'asse inline/principale. |
| safe | Se la dimensione dell'elemento supera il contenitore di allineamento, l'elemento viene allineato come se la modalità di allineamento fosse start. |
| unsafe | Indipendentemente dalla dimensione dell'elemento e dal contenitore di allineamento, il valore di allineamento viene rispettato. |
| legacy | Parola chiave legacy per la compatibilità con le versioni precedenti. Corrisponde a flex-start, flex-end o center a seconda della modalità di layout. Non influisce sull'ereditarietà. |
| initial | Fa sì che la proprietà utilizzi il suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
justify-items vs justify-self
Queste due proprietà sembrano simili ma si applicano a elementi diversi:
justify-itemsviene impostata sul contenitore e fornisce un allineamento orizzontale predefinito per tutti i suoi elementi.justify-selfviene impostata su un singolo elemento e sovrascrive il valorejustify-itemsdel contenitore solo per quell'elemento.
Un pattern comune è quindi impostare un valore predefinito con justify-items sulla griglia, e poi aggiustare uno o due elementi speciali con justify-self.
justify-items vs align-items
justify-items e align-items agiscono su assi perpendicolari:
justify-items→ asse inline (riga) — posizionamento orizzontale in un documento da sinistra a destra.align-items→ asse block (colonna) — posizionamento verticale.
Per impostare entrambi contemporaneamente, usa la proprietà abbreviata place-items: place-items: <align-items> <justify-items>.
Supporto browser
justify-items è supportata in tutti i browser moderni (Chrome, Edge, Firefox, Safari e Opera) come parte del modulo CSS Box Alignment. Il suo caso d'uso principale — l'allineamento all'interno di CSS Grid — è anch'esso ampiamente supportato.