Proprietà grid-template

La proprietà grid-template definisce il numero e la larghezza delle righe e delle colonne che un elemento occuperà nella griglia ed è una forma abbreviata delle proprietà grid-template-rows e grid-template-columns. Le righe e le colonne su cui verrà posizionato l'elemento sono indicate tramite una barra. La proprietà grid-template viene impostata nell'elemento genitore e determina il posizionamento degli elementi figli. Nel valore della proprietà specifichiamo la larghezza delle righe o delle colonne in qualsiasi unità per dimensioni.

Quando si specificano valori in pixel nelle proprietà, le dimensioni degli elementi corrisponderanno esattamente ad essi. Se usiamo la parola auto, le colonne e le righe riempiranno tutto lo spazio disponibile. L'uso dell'unità fr (frazione) significa che tutto lo spazio sarà suddiviso in parti uguali. Il vantaggio dell'unità fr è la sua adattabilità a diversi contenitori o risoluzioni dello schermo, poiché fr divide semplicemente lo spazio nel numero indicato di frazioni senza essere vincolato a una dimensione precisa in pixel.

Sintassi

cssselettore {
  grid-template: larghezza e numero di righe / larghezza e numero di colonne;
}

Esempio

Creiamo una tabella utilizzando la proprietà grid-template:

html<div id="parent">
  <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>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Esempio

Ora assegniamo alla seconda e alla terza riga la stessa larghezza, e ad ogni colonna una larghezza diversa:

html<div id="parent">
  <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>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 60px 1fr 60px / 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Esempio

Ora, nella tabella dell'esempio precedente, rendiamo la riga superiore larga due frazioni, e la prima colonna larga mezza frazione:

html<div id="parent">
  <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>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Vedi anche