Proprietà CSS grid-column-end
Usa la proprietà CSS grid-column-end per impostare dove termina un elemento della griglia nelle colonne, tramite numero di linea o span. Sintassi, valori ed esempi.
La proprietà CSS grid-column-end imposta dove un elemento della griglia termina lungo l'asse inline (colonna). È possibile specificare una linea di colonna in cui fermarsi, oppure uno span che indica quante colonne l'elemento deve coprire. Insieme a grid-column-start, definisce i bordi inline-start e inline-end dell'area della griglia dell'elemento.
Come sono numerate le linee della griglia
Una griglia è delimitata da linee numerate, non dalle tracce (colonne) stesse. Una griglia con tre colonne ha quattro linee verticali: la linea 1 scorre lungo il bordo sinistro, la linea 4 lungo il bordo destro.
line: 1 2 3 4
| col | col | col |grid-column-end fa riferimento a una di queste linee:
grid-column-end: 3fa terminare l'elemento alla linea 3 — si ferma prima della terza colonna.grid-column-end: span 2fa terminare l'elemento 2 colonne dopo il punto di partenza, indipendentemente dal numero di linea assoluto.
È possibile anche contare dalla fine con numeri negativi: -1 è l'ultima linea, -2 quella precedente. Quindi grid-column-end: -1 raggiunge sempre il bordo destro della griglia indipendentemente dal numero di colonne — utile per gli elementi a "larghezza piena".
Suggerimento: il valore descrive solo dove l'elemento si ferma. Dove inizia dipende da
grid-column-start(oppure viene posizionato automaticamente). La proprietà abbreviatagrid-columnimposta entrambi contemporaneamente, ad esempiogrid-column: 1 / 3.
| Valore iniziale | auto |
|---|---|
| Si applica a | Elementi della griglia. |
| Ereditato | No. |
| Animabile | Sì. Il numero di colonne è animabile. |
| Versione | CSS Grid Layout Module Level 1 |
| Sintassi DOM | object.style.gridColumnEnd = "3"; |
Sintassi
Sintassi della proprietà CSS grid-column-end
grid-column-end: auto | span n | column-line | initial | inherit;Esempio della proprietà grid-column-end:
Esempio della proprietà CSS grid-column-end con valore auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 5px;
background-color: #8ebf42;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
.box1 {
grid-column-end: auto;
}
</style>
</head>
<body>
<h2>Grid-column-end property example</h2>
<div class="grid-container">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>Risultato
Esempio della proprietà grid-column-end con numeri di linea e valori span:
Esempio della proprietà CSS grid-column-end con valore span n
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #888;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.box1 {
grid-column-end: 3;
}
.span-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #888;
padding: 10px;
margin-top: 20px;
}
.span-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.span-box1 {
grid-column-end: span 3;
}
</style>
</head>
<body>
<h2>Grid-column-end property example</h2>
<div class="grid-container">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="span-container">
<div class="span-box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>La griglia in alto usa grid-column-end: 3 (un numero di linea), quindi il primo elemento termina alla linea 3 e copre due colonne. La griglia in basso usa grid-column-end: span 3, quindi l'elemento si estende su tre colonne a partire dalla propria posizione.
Nell'esempio seguente, utilizziamo di nuovo span per controllare quante colonne copre l'elemento.
Esempio della proprietà grid-column-end con il valore "span n":
Esempio della proprietà CSS grid-column-end con il valore 'span n'
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
article {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 25px;
padding: 20px;
background-color: #7cbf7c;
}
article div {
text-align: center;
font-size: 35px;
background-color: #ffffff;
padding: 30px 0;
}
article div:first-child {
grid-column-end: span 3;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</article>
</body>
</html>Nell'esempio successivo, il valore applicato specifica su quale colonna deve terminare la visualizzazione dell'elemento.
Esempio della proprietà grid-column-end con un numero di linea:
Esempio della proprietà CSS grid-column-end con il valore 'column-line':
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-gap: 5px;
background-color: #8ebf42;
grid-template-columns: auto auto auto;
grid-gap: 20px;
padding: 30px;
}
.grid-container > div {
text-align: center;
font-size: 35px;
background-color: white;
padding: 20px 0;
}
.box1 {
grid-column-end: 3;
}
</style>
</head>
<body>
<h2>Grid-column-end property example</h2>
<div class="grid-container">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>Esempio della proprietà grid-column-end con il valore "auto":
Esempio di utilizzo della proprietà CSS grid-column-end con valore auto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px;
background-color: #8ebf42;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
.box1 {
grid-column-end: auto;
}
</style>
</head>
<body>
<h2>Grid-column-end property example</h2>
<div class="grid-container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
</div>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| auto | Posiziona automaticamente l'elemento; per impostazione predefinita copre una singola colonna. Questo è il valore iniziale. | Prova » |
| span n | L'elemento termina n colonne dopo la sua linea di inizio. | Prova » |
| column-line | Un numero di linea (positivo o negativo) o una linea denominata in cui l'elemento deve terminare. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito (auto). | |
| inherit | Eredita il valore dall'elemento padre. |
Errori comuni
spanè relativo, le linee sono assolute.grid-column-end: 3si ferma sempre alla linea 3;grid-column-end: span 3si ferma tre colonne dopo la linea di inizio. Confonderli è il bug più comune con le griglie.- Terminare prima di iniziare è consentito — il browser li scambia. Se
grid-column-endsi risolve in una linea precedente agrid-column-start, i due valori vengono scambiati in modo che l'area sia comunque valida. grid-column-endda solo non sposta l'inizio. Impostare solo la fine lascia l'inizio posizionato automaticamente. Per fissare entrambi, usare la proprietà abbreviatagrid-column.
Proprietà correlate
grid-column-start— il bordo inline-start dell'elemento.grid-column— proprietà abbreviata per inizio e fine insieme.grid-row-end— lo stesso concetto sull'asse block (riga).grid-template-columns— definisce le colonne tra cui scorrono queste linee.