Proprietà CSS grid-column-start

La proprietà CSS grid-column-start imposta la linea di colonna in cui inizia un elemento della griglia — il suo bordo inline-start. Insieme a grid-column-end determina quante colonne occupa l'elemento e dove si posiziona. Le due proprietà si scrivono comunemente con la forma abbreviata grid-column: grid-column: <start> / <end>.

Usa grid-column-start quando hai bisogno di un posizionamento esplicito all'interno di un layout CSS Grid — ad esempio, per far estendere un banner hero dalla seconda colonna in poi, o per spingere una barra laterale su una traccia specifica indipendentemente dall'ordine nel sorgente.

Come sono numerate le linee della griglia: in una griglia con quattro colonne ci sono cinque linee verticali, numerate da 1 a 5 dal bordo inline-start. Puoi anche usare numeri negativi: -1 si riferisce all'ultima linea, -2 alla penultima, e così via.


Valore iniziale	`auto`
Si applica a	Elementi della griglia
Ereditata	No
Animabile	Sì — la linea di inizio è animabile
Versione	CSS Grid Layout Module Level 1
Sintassi DOM	`object.style.gridColumnStart = "2"`

Sintassi

grid-column-start: auto | <integer> | <name> | span <n> | initial | inherit;

auto — il browser posiziona l'elemento tramite il posizionamento automatico (predefinito).
<integer> — un numero di linea della griglia, ad es. 2 o -1.
<name> — una linea nominata definita in grid-template-columns.
span <n> — l'elemento si estende su n tracce di colonna da dove viene posizionato.

Valori

Valore	Descrizione
`auto`	Predefinito. L'elemento segue il normale posizionamento automatico e occupa una colonna.
`<integer>`	Un numero di linea positivo o negativo. I valori negativi contano dalla fine della griglia esplicita.
`<name>`	Il nome di una linea della griglia, ad es. `main-start` quando definita tramite `[main-start]` in `grid-template-columns`.
`span <n>`	Si estende su `n` tracce di colonna. A differenza di un numero di linea, questo non fissa la posizione di inizio dell'elemento.
`initial`	Reimposta la proprietà al suo valore iniziale (`auto`).
`inherit`	Eredita il valore dall'elemento padre.

Esempi

Posizionare un elemento su una linea specifica

Impostare grid-column-start: 2 posiziona il primo elemento in modo che il suo bordo sinistro si allinei con la seconda linea verticale della griglia, spostandolo nella seconda posizione 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: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-start: 6;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: 6 — implicit column created</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>
  </body>
</html>

Provalo tu stesso »

Poiché il template definisce solo quattro colonne (linee 1–5), chiedere a box1 di iniziare alla linea 6 costringe il browser a creare colonne implicite (linee 5 e 6) per ospitarlo. Questo è un errore comune — verifica sempre che il numero di linea rimanga all'interno della griglia esplicita, a meno che tu non voglia intenzionalmente tracce implicite.

![Proprietà grid-column-start](/uploads/media/default/0001/03/52b22b9f4f2b6f8f1d65a6fb309fe3ee15e77b77.png "Grid-column-start property" =420x)

Estendere le colonne con `span`

Usare span 2 indica all'elemento di occupare due tracce di colonna da dove il posizionamento automatico lo inserisce. A differenza di un numero di linea, span è relativo — la posizione di inizio esatta dell'elemento è ancora determinata dal posizionamento automatico.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .span-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #888;
        padding: 10px;
        margin-top: 20px;
      }
      .span-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .span-box1 {
        grid-column-start: span 2;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: span 2</h2>
    <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>

Provalo tu stesso »

Questa è la forma più leggibile quando ti interessa la larghezza in colonne di un elemento ma non la sua posizione esatta. Per fissare sia la posizione sia la larghezza, combina grid-column-start con grid-column-end, oppure usa la forma abbreviata grid-column.

Posizionamento automatico predefinito

Quando impostato su auto (predefinito), l'elemento viene inserito nella prossima cella disponibile come determinato dall'algoritmo grid auto-flow. Gli elementi riempiono la griglia riga per riga.

<!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: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-start: auto;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: auto (default)</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 class="box8">8</div>
      <div class="box9">9</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Ancorare alla colonna 4

grid-column-start: 4 ancora il bordo sinistro del primo elemento alla quarta linea verticale. Gli elementi rimanenti riempiono le colonne precedenti tramite il posizionamento automatico.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 12px;
        background-color: red;
        padding: 15px;
      }
      .grid-container > div {
        background-color: #dcdcdc;
        text-align: center;
        padding: 20px 0;
        font-size: 35px;
        color: white;
      }
      .box1 {
        grid-column-start: 4;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: 4</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>9</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Pattern comuni e insidie

Combinare start ed end per un posizionamento preciso

Per il controllo completo sul posizionamento, abbina grid-column-start a grid-column-end. La forma abbreviata grid-column è il modo più conciso per farlo:

/* Place item from column line 2 to column line 4 (spans 2 tracks) */
.item {
  grid-column: 2 / 4;
  /* equivalent to: */
  /* grid-column-start: 2; */
  /* grid-column-end: 4; */
}

Usare numeri di linea negativi

I numeri interi negativi contano dalla fine della griglia esplicita. -1 è l'ultima linea della griglia esplicita, il che rende semplice estendere un elemento fino al bordo opposto senza sapere quante colonne ci sono:

/* Full-width banner across all explicit columns */
.banner {
  grid-column-start: 1;
  grid-column-end: -1;
}

Questo equivale a grid-column: 1 / -1. Nota che i numeri negativi indirizzano solo le linee nella griglia esplicita (definita da grid-template-columns); non raggiungono le colonne implicite create dall'overflow.

Linee nominate

Quando definisci linee nominate in grid-template-columns, puoi riferirle per nome invece che per numero. Questo rende i layout autodocumentati:

.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
}

.sidebar {
  grid-column-start: sidebar-start;  /* or just: grid-column-start: 1 */
}

.main {
  grid-column-start: content-start;  /* or: grid-column-start: 2 */
}

Le linee nominate sono particolarmente utili in componenti di layout grandi o riutilizzabili dove i numeri di colonna possono cambiare.

L'interazione tra l'elemento e il posizionamento automatico

Quando grid-column-start è impostato su una linea esplicita, il posizionamento automatico per gli elementi successivi riprende dalla prossima cella disponibile dopo l'elemento posizionato esplicitamente. Questo può lasciare spazi vuoti se non ci sono elementi per riempirli — usa grid-auto-flow: dense per riempire automaticamente i vuoti.

Proprietà correlate

grid-column-end — imposta la linea in cui termina l'elemento.
grid-column — forma abbreviata di grid-column-start e grid-column-end.
grid-row-start — l'equivalente sull'asse delle righe di questa proprietà.
grid-row — forma abbreviata di grid-row-start e grid-row-end.
grid-area — forma abbreviata che imposta start/end di riga e colonna in una volta sola.
grid-template-columns — definisce le colonne e le linee nominate a cui fa riferimento questa proprietà.
grid-auto-flow — controlla come gli elementi posizionati automaticamente riempiono la griglia, influenzando il comportamento degli spazi vuoti.

Esercitati

Pratica

Cosa fa la proprietà CSS grid-column-start?

Indica al browser dove iniziare la colonna in un layout a griglia.Specifica l'indirizzo email del mittente in un modulo di contatto.Definisce la codifica dei caratteri per il documento HTML.Determina la larghezza di un bordo in un layout a griglia.Determina dove viene posizionato un elemento in un layout a griglia.

Sintassi

Valori

Esempi

Posizionare un elemento su una linea specifica

Estendere le colonne con span

Posizionamento automatico predefinito

Ancorare alla colonna 4

Pattern comuni e insidie

Combinare start ed end per un posizionamento preciso

Usare numeri di linea negativi

Linee nominate

L'interazione tra l'elemento e il posizionamento automatico

Proprietà correlate

Esercitati

Estendere le colonne con `span`