Cos'è CSS Grid?

Il layout a griglia CSS (o semplicemente CSS Grid) è un sistema di layout bidimensionale in CSS. Permette di gestire la disposizione degli elementi sia lungo le righe (orizzontalmente) che lungo le colonne (verticalmente), creando strutture di rete complesse per costruire interfacce.

I concetti principali di CSS Grid includono:

• Contenitore di Griglia: Elemento a cui si applica la proprietà display: grid o display: inline-grid. I discendenti di questo elemento diventano elementi di Griglia.
• Elementi di Griglia: I discendenti diretti del contenitore di Griglia.
• Linee di Griglia: Linee divisorie che formano la griglia. Possono essere nominate o avere un indice numerico.
• Tracce di Griglia: Lo spazio tra due linee di griglia — può essere una colonna o una riga.
• Celle di Griglia: La più piccola unità di griglia, formata dall'intersezione di una riga e una colonna.
• Aree di Griglia: Una regione rettangolare della griglia che occupa una o più celle.

Le proprietà principali per lavorare con CSS Grid includono:

Per il contenitore:

• display: grid | inline-grid;
• grid-template-columns: Definisce le colonne della griglia.
• grid-template-rows: Definisce le righe della griglia.
• grid-template-areas: Definisce le aree nominate della griglia.
• gap | row-gap | column-gap: Definisce gli spazi tra le celle.
• justify-items | align-items | place-items: Allineamento del contenuto all'interno delle celle lungo gli assi principale e trasversale.
• justify-content | align-content | place-content: Allineamento delle tracce di griglia all'interno del contenitore.

Per gli elementi (Elementi di Griglia):

• grid-column-start | grid-column-end | grid-column: Determina quali linee di colonna occupa l'elemento.
• grid-row-start | grid-row-end | grid-row: Determina quali linee di riga occupa l'elemento.
• grid-area: Assegna all'elemento un'area nominata della griglia o ne definisce la posizione usando le linee.
• justify-self | align-self | place-self: Allineamento dell'elemento stesso all'interno della sua cella.

Il CSS Grid fornisce strumenti potenti per creare layout reattivi e complessi, semplificando notevolmente i compiti che in precedenza richiedevano l'uso di float, inline-block o posizionamento assoluto.

.container {
  display: grid; /* Rende l'elemento un contenitore di Griglia */
  grid-template-columns: 1fr 1fr 1fr; /* Crea 3 colonne di larghezza uguale */
  grid-template-rows: auto auto; /* Crea 2 righe con altezza automatica */
  gap: 10px; /* Aggiunge spazi tra le celle */
}

.item {
  /* Gli elementi all'interno del contenitore diventano automaticamente elementi di Griglia */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Il primo elemento occupa le colonne da 1 a 3 */
}