Proprietà CSS grid-column
Padroneggia la shorthand CSS grid-column: posiziona gli elementi per numero di linea, span, indice negativo o linee con nome. Esempi interattivi inclusi.
La proprietà CSS grid-column è una shorthand che posiziona un elemento della griglia lungo l'asse orizzontale (inline). Definisce il punto di inizio e il punto di fine dell'elemento, determinando così la sua posizione nelle colonne e il numero di colonne che occupa. Combina le due proprietà estese:
- grid-column-start — la linea di colonna da cui inizia l'elemento.
- grid-column-end — la linea di colonna in cui termina l'elemento.
Una griglia è suddivisa da linee di griglia, e grid-column funziona facendo riferimento a quelle linee piuttosto che alle celle tra di esse. In una griglia a quattro colonne ci sono cinque linee verticali, numerate da 1 a 5 da sinistra a destra (oppure da −5 a −1 contando dalla destra).
Nota:
grid-columncontrolla solo il posizionamento lungo le colonne. Per posizionare un elemento attraverso le righe, usa grid-row. Per posizionare un elemento sia per riga che per colonna contemporaneamente, usa grid-area.
| Valore iniziale | auto / auto |
| Si applica a | Elementi della griglia |
| Ereditato | No |
| Animabile | Sì |
| Specifica | CSS Grid Layout Level 1 |
| Sintassi DOM | object.style.gridColumn = "1 / span 3" |
Sintassi
/* Two explicit line numbers */
grid-column: <start-line> / <end-line>;
/* Start line + span count */
grid-column: <start-line> / span <number>;
/* Span by named line */
grid-column: span <name>;
/* Single value (sets start; end defaults to auto) */
grid-column: <start-line>;
/* Global keywords */
grid-column: initial | inherit | unset | revert;Forme dei valori
Ci sono quattro modi comuni per scrivere grid-column:
| Forma | Esempio | Cosa fa |
|---|---|---|
| Due numeri di linea | 2 / 4 | Inizia alla linea 2, finisce alla linea 4 (occupa le colonne 2–3) |
| Inizio + numero di span | 2 / span 2 | Inizia alla linea 2, si estende per 2 colonne in avanti |
| Numero di linea negativo | 1 / -1 | Si estende dalla prima all'ultima linea (larghezza totale) |
| Linee con nome | content-start / content-end | Usa i nomi definiti in grid-template-columns |
| Valore singolo | 3 | Imposta grid-column-start: 3; la fine è auto (una colonna) |
Quando si scrive un solo valore (senza /), viene impostato solo grid-column-start; grid-column-end è auto per impostazione predefinita, posizionando l'elemento in un singolo tracciato di colonna.
Come sono numerati le linee di griglia
Le linee di griglia vengono conteggiate a partire da 1 al bordo iniziale (a sinistra nei layout LTR). È possibile usare anche numeri negativi per contare dal bordo finale, quindi −1 fa sempre riferimento all'ultima linea indipendentemente dal numero di colonne presenti.
Column tracks: [ 1 ][ 2 ][ 3 ][ 4 ]
Line numbers: 1 2 3 4 5
Negative: -5 -4 -3 -2 -1Questo significa che grid-column: 1 / -1 fa sempre sì che un elemento si estenda per l'intera larghezza della griglia esplicita, indipendentemente dal numero di colonne.
Esempi
Posizionare un elemento con numeri di linea espliciti
Il Box 6 è posizionato tra le linee di colonna 2 e 4, quindi occupa le colonne 2 e 3.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #666;
text-align: center;
padding: 20px 0;
font-size: 20px;
}
.box6 {
grid-column: 2 / 4;
}
</style>
</head>
<body>
<h2>Grid-column 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>
Posizionare il primo elemento con 1 / 3
Il Box 1 è posizionato con grid-column: 1 / 3, che occupa i primi due tracciati di colonna.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
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: 1 / 3;
}
</style>
</head>
<body>
<h2>Grid-column 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>Usare span e un elemento a larghezza totale con 1 / -1
La parola chiave span è utile quando si sa quante colonne occupare ma non si conosce il numero della linea di fine. Una linea di fine negativa (-1) raggiunge sempre l'ultima linea di colonna, facendo sì che l'elemento si estenda per l'intera larghezza della griglia esplicita.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #4caf50;
color: #fff;
text-align: center;
padding: 20px 0;
font-size: 20px;
}
.featured {
grid-column: 1 / span 2; /* starts at line 1, covers 2 columns */
}
.full-width {
grid-column: 1 / -1; /* spans the whole explicit grid */
}
</style>
</head>
<body>
<h2>span and full-width example</h2>
<div class="grid-container">
<div class="featured">Featured (2 cols)</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div class="full-width">Full width (1 / -1)</div>
</div>
</body>
</html>Posizionare elementi con linee con nome
È possibile assegnare nomi alle linee di griglia in grid-template-columns usando la sintassi con parentesi quadre, quindi fare riferimento a quei nomi in grid-column. Questo rende i layout più leggibili e resistenti ai cambiamenti nel numero di colonne.
<!DOCTYPE html>
<html>
<head>
<title>Named grid lines</title>
<style>
.grid-container {
display: grid;
/* Names the lines around the middle two columns */
grid-template-columns:
[full-start] 1fr
[content-start] 2fr 2fr
[content-end] 1fr
[full-end];
gap: 10px;
background-color: #eee;
padding: 10px;
}
.grid-container > div {
background-color: #5c6bc0;
color: #fff;
text-align: center;
padding: 20px 0;
font-size: 18px;
}
.sidebar {
grid-column: full-start / content-start; /* first column only */
}
.main {
grid-column: content-start / content-end; /* middle two columns */
}
.aside {
grid-column: content-end / full-end; /* last column only */
}
</style>
</head>
<body>
<h2>Named lines example</h2>
<div class="grid-container">
<div class="sidebar">Sidebar</div>
<div class="main">Main content</div>
<div class="aside">Aside</div>
</div>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
<line-number> | Un numero intero di linea (positivo conta dall'inizio, negativo dalla fine). |
<line-name> | Un nome personalizzato definito in grid-template-columns. |
span <number> | Si estende per il numero dato di tracciati di colonna. |
span <name> | Si estende fino alla prossima linea con il nome specificato. |
auto | Il browser posiziona l'elemento automaticamente (predefinito). |
initial | Reimposta al valore predefinito (auto / auto). |
inherit | Eredita il valore calcolato dall'elemento padre. |
unset | Si comporta come inherit se la proprietà è ereditabile, altrimenti come initial. |
Errori comuni
1 / -1si estende solo sulla griglia esplicita. Se gli elementi sono posizionati nella griglia implicita (righe/colonne extra create automaticamente dal browser), una linea di fine negativa non si estende in quei tracciati. Prima definire la griglia completa congrid-template-columns.spansenza una linea di inizio. Scriveregrid-column: span 3imposta sologrid-column-end: span 3; l'inizio èauto, quindi il browser lo determina automaticamente. Questo è valido, ma il posizionamento dipende dall'ordine di flusso automatico.- Ricerca di linee con nome. Quando si fa riferimento a un nome che non esiste nel template, il browser lo tratta come
auto. Verificare sempre il nome ingrid-template-columns. - Shorthand con valore singolo.
grid-column: 3imposta l'inizio alla linea 3 e la fine suauto— non alla linea 4. L'elemento occupa esattamente un tracciato di colonna, a meno che la fine posizionata automaticamente non si estenda di più.
Proprietà correlate
- grid-column-start e grid-column-end — le due proprietà estese che
grid-columnraggruppa insieme. - grid-row — l'equivalente sull'asse verticale; stessa sintassi, applicata alle righe.
- grid-area — imposta il posizionamento per riga e colonna in un'unica dichiarazione.
- grid-template-columns — definisce i tracciati di colonna e le linee con nome che
grid-columnutilizza come target. - grid-template-rows — definisce i tracciati di riga e le linee con nome per grid-row.
- grid-auto-columns — controlla la dimensione dei tracciati di colonna creati implicitamente.
- grid — la shorthand onnicomprensiva per la griglia.