La funzione repeat nei CSS Grid

Se hai diverse colonne a cui vengono assegnate le stesse dimensioni, puoi semplificare la scrittura utilizzando la funzione repeat. Il primo parametro di questa funzione specifica il numero di colonne, e il secondo - la loro larghezza. Diamo un'occhiata ad alcuni esempi per vedere come funziona.

Esempio

Supponiamo di avere tre colonne della stessa dimensione:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Semplifichiamo la scrittura con repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Esempio

Supponiamo di avere tre colonne della stessa dimensione, e una quarta di dimensione diversa:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

Semplifichiamo la scrittura con repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
}

Esempio

Supponiamo che le prime tre colonne siano di una dimensione, e le seconde tre colonne di un'altra dimensione:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}

Semplifichiamo la scrittura con repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

Esempio

Supponiamo di avere le prime tre colonne di una dimensione, poi un'altra colonna, e poi altre tre colonne di dimensione diversa:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

Semplifichiamo la scrittura con repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}

Esempio

La semplificazione funziona per qualsiasi unità di misura. Supponiamo, ad esempio, di avere tre colonne in pixel:

css#parent {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Semplifichiamo la scrittura con repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

Compiti pratici