Proprietà CSS grid-template-columns

La proprietà grid-template-columns definisce il numero di colonne in un layout CSS Grid e la larghezza (dimensione del track) di ciascuna. Si applica al grid container — l'elemento con display: grid — e ogni valore nell'elenco crea un track di colonna esplicito.

Questa pagina illustra le parole chiave e le funzioni di dimensionamento dei track che è possibile passare a questa proprietà (fr, repeat(), minmax(), auto, fit-content()), quando usarle e le insidie più comuni. Per l'equivalente delle righe, vedi grid-template-rows; per definire colonne e righe insieme, vedi grid-template.

Valore iniziale	none
Si applica a	Grid container.
Ereditato	No.
Animabile	Sì. Le colonne sono animabili.
Versione	CSS Grid Layout Module Level 1
Sintassi DOM	object.style.gridTemplateColumns = "40px 40px 40px";

Sintassi

CSS grid-template-columns

grid-template-columns: none | auto | max-content | min-content | minmax() | <length> | <percentage> | <flex> | fit-content | repeat | initial | inherit;

Esempio della proprietà grid-template-columns:

Esempio di codice CSS grid-template-columns

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
        margin-top: 20px;
      }
      .example > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-columns property example</h2>
    <div class="example">
      <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>
  </body>
</html>

Provalo tu stesso »

Qui 1fr 1fr 1fr 1fr crea quattro colonne di uguale larghezza. L'unità fr ("fraction") divide lo spazio rimanente nel container dopo aver sottratto i gap, quindi i quattro track rimangono sempre uguali indipendentemente dalla larghezza dello schermo. Gli otto elementi vanno su due righe implicite perché ci sono solo quattro colonne.

Risultato

Esempio di grid-template-columns applicato al grid-container:

Esempio CSS grid-template-columns con valori di lunghezza

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 40px 150px auto 80px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-columns property example</h2>
    <div class="grid-container">
      <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>
  </body>
</html>

Provalo tu stesso »

Combinare track fissi e flessibili è il pattern più comune in scenari reali. Nell'esempio sopra, la prima colonna è esattamente 40px, la seconda 150px, la quarta 80px, e la terza (auto) assorbe lo spazio rimanente.

Parole chiave e funzioni di dimensionamento dei track

Raramente si elencano tutte le colonne manualmente. Queste parole chiave e funzioni permettono di mantenere il valore conciso e responsivo.

repeat() — evitare le ripetizioni

repeat(count, size) si espande in count track della dimensione specificata. grid-template-columns: repeat(4, 1fr) equivale a 1fr 1fr 1fr 1fr. Combinato con auto-fill/auto-fit, inserisce quanti track possibile nel container — la base dei grigliati di card responsivi:

/* As many 200px+ columns as fit; each grows to fill the row. */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

minmax() — impostare un minimo e un massimo

minmax(min, max) consente a un track di crescere e restringersi tra due limiti. minmax(200px, 1fr) non scende mai sotto 200px ma si allunga per condividere lo spazio disponibile. Usalo per evitare che le colonne collassino su schermi piccoli.

fr — condividere lo spazio rimanente

L'unità fr distribuisce lo spazio che rimane dopo le dimensioni fisse e i gap. 2fr 1fr rende la prima colonna larga il doppio della seconda. A differenza delle percentuali, fr tiene già conto del gap, quindi le colonne non fuoriescono dal container.

auto, max-content, min-content, fit-content()

auto dimensiona un track in base al suo contenuto ma gli consente di espandersi; max-content lo rende largo quanto il suo contenuto più lungo senza interruzioni; min-content lo restringe alla larghezza minima consentita dal contenuto; fit-content(300px) si comporta come auto ma non supera il limite specificato.

Provale insieme

<!DOCTYPE html>
<html>
  <head>
    <title>grid-template-columns with repeat and minmax</title>
    <style>
      .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .cards > div {
        background-color: #6b9b37;
        color: #fff;
        text-align: center;
        padding: 30px 0;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <h2>Responsive columns</h2>
    <div class="cards">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Ridimensiona l'anteprima: il numero di colonne cambia automaticamente mentre ogni card mantiene una larghezza minima di 120px.

Valori

Valore	Descrizione	Prova
none	Questo è il valore predefinito della proprietà.	Prova »
auto	La dimensione del track è determinata dal suo contenuto, ma può crescere per riempire lo spazio disponibile.	Prova »
max-content	La dimensione di ogni colonna dipende dall'elemento più grande nella colonna.	Prova »
min-content	La dimensione di ogni colonna dipende dall'elemento più piccolo nella colonna.	Prova »
minmax(min, max)	L'intervallo di dimensione è maggiore o uguale a "min" e minore o uguale a "max".	Prova »
`<length>`	La dimensione delle colonne è specificata da un valore di lunghezza.	Prova »
`<percentage>`	La dimensione delle colonne è specificata in percentuale.	Prova »
`<flex>`	Una dimensione non negativa con l'unità "fr" che specifica il fattore flex del track. Ogni track di dimensione `<flex>` condivide lo spazio rimanente in proporzione al proprio fattore flex.	Prova »
fit-content	Rappresenta min(max-content, max(auto, argomento)), simile ad auto (cioè minmax(auto, max-content)), ma la dimensione è maggiore del minimo auto.	Prova »
repeat	Rappresenta un frammento ripetuto dell'elenco di track, che consente di scrivere in forma più compatta un gran numero di colonne con uno schema ricorrente.	Prova »
initial	Imposta la proprietà al suo valore predefinito.	Prova »
inherit	Eredita la proprietà dall'elemento genitore.	Prova »

Proprietà correlate

grid-template-rows — la stessa idea per i track orizzontali (righe).
grid-template-areas — assegna nomi alle regioni della griglia e posiziona gli elementi per nome.
grid-template — shorthand che imposta righe, colonne e aree in una volta sola.
grid-auto-columns — dimensiona le colonne implicite create oltre il template esplicito.
grid — lo shorthand completo per un'intera definizione di griglia.

Esercitazione

Pratica

Qual è la funzione della proprietà 'grid-template-columns' in CSS?

Definisce il numero di righe in un layout a griglia.Viene utilizzata per specificare i nomi delle linee e le funzioni di dimensionamento dei track delle colonne della griglia.Aiuta ad allineare il testo all'interno del layout a griglia.Imposta la larghezza e il numero di colonne in un layout a griglia.Viene utilizzata per definire il colore di sfondo della griglia.