Proprietà grid-template-columns
La proprietà grid-template-columns definisce
il numero e la larghezza delle colonne che
l'elemento occuperà nella griglia.
La proprietà viene specificata nell'elemento genitore
e determina la larghezza delle colonne degli elementi figli.
Nel valore della proprietà specifichiamo la larghezza delle colonne
in qualsiasi unità
di misura per le dimensioni.
Quando si specificano valori in pixel nelle proprietà,
le dimensioni delle colonne corrisponderanno esattamente ad essi.
Se specifichiamo la parola auto, le colonne
riempiranno tutto lo spazio disponibile. L'uso
dell'unità fr (frazione) significa
che tutto lo spazio sarà suddiviso
in parti uguali. Il vantaggio
di fr è la sua adattabilità a
diversi contenitori o risoluzioni dello schermo,
poiché fr divide semplicemente lo spazio nel numero indicato
di frazioni senza legarsi a una dimensione precisa in pixel.
Sintassi
selettore {
grid-template-columns: larghezza colonna;
}
Esempio
Specifichiamo la larghezza delle colonne per i nostri elementi nella griglia:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Assegniamo alla prima e alla terza colonna una larghezza fissa in pixel, e lasciamo che la seconda colonna riempia automaticamente lo spazio disponibile:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Ora utilizziamo la proprietà
grid-template-columns
per fare in modo che la prima e la seconda
colonna occupino una parte del contenitore,
e la terza colonna - tre parti:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
I valori specificati in unità fr
possono essere frazionari. Modifichiamo
l'esempio precedente, specificando
per la seconda e la terza colonna una larghezza
in numeri frazionari:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Specifichiamo nella proprietà grid-template-columns
la funzione repeat(),
che indica al contenitore che tutte e tre
le colonne devono avere la stessa larghezza:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Ora modifichiamo l'esempio precedente in modo che alle tre colonne uguali se ne aggiunga una quarta, che occuperà due frazioni del contenitore:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Assegniamo alle prime due colonne una larghezza di una frazione del contenitore, e alle ultime due colonne - di due frazioni:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Ora impostiamo la larghezza delle colonne
combinando valori specificati tramite
la funzione repeat() e unità libere fr:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Inoltre, nella funzione repeat() si può specificare
il valore auto-fill, che riempirà
il nostro contenitore con colonne identiche della larghezza desiderata:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
È molto comodo specificare insieme a auto-fill
la funzione minmax,
che definisce un intervallo di larghezza per le colonne
da un valore minimo a uno massimo.
Se la larghezza del contenitore non può contenere tutte
le colonne, alcune di esse si sposteranno
su una nuova riga, mentre le colonne nella riga
si distribuiranno uniformemente al suo interno. Modifichiamo
l'esempio precedente, specificando in esso la funzione minmax.
Per vedere le diverse varianti di disposizione delle colonne,
modificate la larghezza della pagina del vostro browser:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Ora specifichiamo la proprietà auto-fit,
la cui differenza da auto-fill consiste nel fatto
che adatta il numero di colonne
alla larghezza disponibile del contenitore, espandendole o
comprimendole:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Insieme a fr si possono anche
utilizzare valori in %, che definiscono anch'essi
quale parte del contenitore occuperà la colonna.
In questo caso, verrà prima calcolata la dimensione
della colonna in %, e lo spazio libero rimanente
verrà suddiviso in frazioni:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Utilizziamo insieme le proprietà
grid-template-columns e
grid-template-rows:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Utilizziamo le proprietà
grid-template-columns e
grid-template-rows
per creare una tabella di nove celle, disposte
in tre righe. Inoltre, la seconda e la terza riga avranno la stessa larghezza,
mentre ogni colonna avrà una larghezza diversa:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Ora, nella tabella dell'esempio precedente, facciamo in modo che la riga superiore abbia una larghezza di due frazioni, e la prima colonna - di mezza frazione:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Vedi anche
-
la proprietà
grid-template-rows,
che definisce il numero e l'altezza delle righe nella griglia -
la proprietà
grid-auto-columns,
che definisce il numero e la larghezza delle colonne nella griglia implicita
