CSS - Proprietà justify-items

Ciao, futuri sviluppatori web! Oggi, ci immergeremo nel meraviglioso mondo del CSS e esploreremo una proprietà che può rendere i vostri layout sembra essere stati creati da un professionista esperto. Sto parlando della proprietà justify-items. Credetemi, alla fine di questo tutorial, giustificherete gli elementi come un giudice della Corte Suprema! ?

Cos'è justify-items?

Prima di entrare nei dettagli, capiremo cosa fa la proprietà justify-items. Immagina di avere un contenitore di griglia pieno di carini piccoli elementi di griglia. La proprietà justify-items è come una bacchetta magica che ti permette di controllare come questi elementi sono allineati lungo l'asse inline (solitamente orizzontale) entro le loro aree di griglia.

Sintassi

La sintassi di base per justify-items è abbastanza semplice:

.container {
justify-items: value;
}

Dove value può essere una delle molte opzioni che esploreremo tra poco. Ma prima, impostiamo una griglia semplice per giocare:

<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(2, 100px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}

.item {
background-color: #3498db;
color: white;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}

Questo crea una griglia 2x2 con quattro elementi. Ora, esploriamo i diversi valori che possiamo utilizzare con justify-items!

Valori Possibili

Ecco una tabella di tutti i valori possibili per justify-items:

Valore	Descrizione
normal	Valore predefinito, tipicamente si comporta come stretch
stretch	Stira gli elementi per riempire l'area di griglia
start	Allinea gli elementi all'inizio dell'area di griglia
end	Allinea gli elementi alla fine dell'area di griglia
center	Centra gli elementi nell'area di griglia
flex-start	Allinea gli elementi all'inizio (per contenitori flex)
flex-end	Allinea gli elementi alla fine (per contenitori flex)
self-start	Allinea gli elementi al loro lato di inizio
self-end	Allinea gli elementi al loro lato di fine
left	Allinea gli elementi a sinistra
right	Allinea gli elementi a destra
baseline	Allinea gli elementi lungo la loro baseline
last baseline	Allinea gli elementi lungo la loro ultima baseline
safe center	Centra gli elementi in modo sicuro (previene la perdita di dati)
legacy right	Allineamento a destra (supporto legacy)

Ora, analizziamo questi valori con esempi!

CSS justify-items - Valore normal

.grid-container {
justify-items: normal;
}

Il valore normal è predefinito. Nella maggior parte dei casi, si comporta come stretch. È come dire ai tuoi elementi di griglia, "Sii te stesso!"

CSS justify-items - Valore stretch

.grid-container {
justify-items: stretch;
}

Con stretch, i tuoi elementi si diffonderanno per riempire l'intera larghezza della loro area di griglia. È come dire ai tuoi elementi di prendere un respiro profondo e espandersi!

CSS justify-items - Valore start

.grid-container {
justify-items: start;
}

Il valore start allinea i tuoi elementi all'inizio della loro area di griglia. Pensalo come se stessero mettendo in fila per una corsa.

CSS justify-items - Valore end

.grid-container {
justify-items: end;
}

Al contrario, end spinge i tuoi elementi alla fine della loro area di griglia. È come se i tuoi elementi stessero cercando di toccare la linea di arrivo!

CSS justify-items - Valore center

.grid-container {
justify-items: center;
}

center fa esattamente ciò che ti aspetteresti - centra i tuoi elementi nella loro area di griglia. È perfetto per creare un layout bilanciato e zen.

CSS justify-items - Valori flex-start e flex-end

.grid-container {
justify-items: flex-start;
}

.grid-container {
justify-items: flex-end;
}

Questi valori sono simili a start e end, ma sono specifici per i contenitori flex. Sono come i cugini cool di start e end che si presentano solo alle feste flex.

CSS justify-items - Valori self-start e self-end

.grid-container {
justify-items: self-start;
}

.grid-container {
justify-items: self-end;
}

Questi valori allineano gli elementi al loro lato di inizio o fine, che può essere diverso dall'inizio o fine del contenitore in alcuni modi di scrittura. È come lasciare che ciascun elemento decida da quale parte del letto vuole dormire!

CSS justify-items - Valori left e right

.grid-container {
justify-items: left;
}

.grid-container {
justify-items: right;
}

Questi valori fanno esattamente ciò che dicono - allineano gli elementi a sinistra o a destra. Semplice e diretto, come una buona tazza di caffè al mattino.

CSS justify-items - Valori baseline e last baseline

.grid-container {
justify-items: baseline;
}

.grid-container {
justify-items: last baseline;
}

Questi valori allineano gli elementi lungo la loro baseline o ultima baseline. È particolarmente utile quando hai testo di diverse dimensioni e vuoi che si allineino bene.

CSS justify-items - Valore safe center

.grid-container {
justify-items: safe center;
}

Questo valore centra gli elementi, ma garantisce che non si verifichi alcuna perdita di dati. È come avere una rete di sicurezza per i tuoi elementi centralizzati!

CSS justify-items - Valore legacy right

.grid-container {
justify-items: legacy right;
}

Questo valore è per la retrocompatibilità. È come tenere un vecchio telefono a disco - probabilmente non lo userai, ma è lì se ne hai bisogno!

Ecco fatto, ragazzi! Avete appena fatto un giro panoramico della proprietà justify-items. Ricordate, la chiave per padroneggiare il CSS è la pratica. Quindi, andate avanti, sperimentate con questi valori e create layout allineati meravigliosamente. Prima di sapere, giusterete gli elementi nel sonno!

Buon coding, e possa la vostra griglia essere sempre perfettamente allineata! ??‍??‍?

Credits: Image by storyset