logo logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Biadets Blog

Il Grid in CSS

Il Grid in CSS è una tecnica di layout che permette di creare griglie (o tabelle), ovvero strutture formate da righe e colonne, per disporre in modo ordinato gli elementi di una pagina web. 

Grid è simile alle tabelle HTML, ma con la possibilità di essere dinamico (ad esempio, può disporre gli elementi in modo diverso in base alla dimensione dello schermo).

A differenza di Flexbox che sistema gli elementi su una riga, Grid permette di organizzare gli elementi su due assi contemporaneamente (colonne e righe).

Ecco un esempio di layout Grid:

1
2
3
4
5
6
7
8
9

<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>9</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.grid-container > div {
  border: 1px solid black;
}
</style>

Nell'esempio, viene creata una "griglia" di dimensioni 3 x 3, ovvero 3 colonne e 3 righe. Utilizziamo le seguenti proprietà CSS:

  • display:grid per allineare i 9 elementi all'interno del contenitore. Abbiamo già trattato della proprietà display nella lezione sulla visibilità degli elementi.
  • grid-template-columns specifica il numero di colonne e la loro dimensione. In questo caso, sono tutte larghe uguali (1fr). Ne parleremo più in dettaglio nella lezione sul Grid container.
  • gap:10px per aggiungere spazio tra gli elementi. È una proprietà simile al padding.
  • border per aggiungere un bordo agli elementi.

Differenza tra Grid container e Grid item

Per usare la proprietà grid in CSS, è importante capire la differenza tra Grid container e Grid item:

  • Il Grid container è l’elemento a cui viene applicata la proprietà display:grid. Questo elemento diventa il contenitore della "tabella", dove si posizioneranno gli elementi.

<div class="grid-container">
  <!-- Elementi della griglia -->
</div>

<style>
.grid-container {
  display: grid;
}
</style>

  • I Grid item sono gli elementi all'interno del Grid container e possono occupare una o più celle a seconda delle proprietà impostate (come grid-column e grid-row), che vedremo nella lezione sui Grid item.

<div class="grid-container">
  <div>Grid item</div>
  <div>Grid item</div>
  <div>Grid item</div>
</div>

Elementi della griglia: righe e colonne

Nel Grid di CSS, la griglia è composta da righe e colonne:

La struttura Grid di CSS: righe e colonne

In un layout Grid:

  • Le righe sono le linee orizzontali della griglia. Ad esempio, con la proprietà grid-template-rows è possibile definire l’altezza di ciascuna riga.
  • Le colonne sono le linee verticali della griglia. Ad esempio, la proprietà grid-template-columns consente di impostare la larghezza di ciascuna colonna.


Nelle prossime due lezioni, vediamo quali sono le proprietà da usare nei Grid container e Grid item.