Allineamento degli elementi in Grid

7.1 Proprietà justify-items

CSS Grid Layout offre strumenti efficaci per gestire l'allineamento degli elementi all'interno della griglia. Le proprietà justify-items, align-items e place-items permettono di regolare con precisione come i grid-item vengono posizionati all'interno delle loro celle orizzontalmente e verticalmente. Esaminiamo queste proprietà in dettaglio.

La proprietà justify-items definisce l'allineamento orizzontale di tutti gli elementi della griglia all'interno delle loro celle in tutta la griglia.

Sintassi:

    
      .grid-container {
        justify-items: value;
      }
    
  

Dove:

• value: il valore che definisce l'allineamento orizzontale degli elementi. Valori possibili:
  • start: allinea gli elementi all'inizio della cella
  • end: allinea gli elementi alla fine della cella
  • center: centra gli elementi all'interno della cella
  • stretch (predefinito): estende gli elementi per riempire tutta la larghezza della cella

Esempio 1: Allineamento all'inizio della cella

In questo esempio tutti gli elementi saranno allineati al bordo sinistro delle loro celle:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: start; /* Tutti gli elementi vengono allineati all'inizio della cella */
      }
    
  

Esempio 2: Centratura degli elementi

In questo esempio tutti gli elementi saranno centrati all'interno delle loro celle:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center; /* Tutti gli elementi vengono centrati all'interno della cella */
      }
    
  

7.2 Proprietà align-items

La proprietà align-items definisce l'allineamento verticale di tutti gli elementi della griglia all'interno delle loro celle in tutta la griglia.

Sintassi:

    
      .grid-container {
        align-items: value;
      }
    
  

Dove:

• value: il valore che definisce l'allineamento verticale degli elementi. Valori possibili:
  • start: allinea gli elementi all'inizio della cella
  • end: allinea gli elementi alla fine della cella
  • center: centra gli elementi all'interno della cella verticalmente
  • stretch (predefinito): estende gli elementi per riempire tutta l'altezza della cella

Esempio 1: Allineamento all'inizio della cella

In questo esempio tutti gli elementi saranno allineati al bordo superiore delle loro celle:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: start; /* Tutti gli elementi vengono allineati in alto alla cella */
      }
    
  

Esempio 2: Centratura degli elementi verticalmente

In questo esempio tutti gli elementi saranno centrati verticalmente all'interno delle loro celle:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: center; /* Tutti gli elementi vengono centrati verticalmente all'interno della cella */
      }
    
  

7.3 Proprietà place-items

La proprietà place-items è una scorciatoia per impostare contemporaneamente i valori di align-items e justify-items.

Sintassi:

    
      .grid-container {
        place-items: align-value justify-value;
      }
    
  

Dove:

• align-value: valore per l'allineamento verticale all'interno della cella (align-items)
• justify-value: valore per l'allineamento orizzontale all'interno della cella (justify-items)

Se si specifica un solo valore per la proprietà place-items, ad esempio, place-items: stretch, gli elementi saranno allineati in entrambe le direzioni.

Esempio 1: Centratura degli elementi verticalmente e orizzontalmente

In questo esempio tutti gli elementi saranno centrati all'interno delle loro celle sia orizzontalmente che verticalmente:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: center; /* Gli elementi vengono centrati sia orizzontalmente che verticalmente */
      }
    
  

Esempio 2: Estensione degli elementi in altezza e allineamento al bordo superiore sinistro

In questo esempio tutti gli elementi saranno estesi in altezza e allineati al bordo superiore sinistro delle loro celle:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: stretch start; /* Gli elementi vengono estesi a tutta l'altezza della cella e allineati al bordo superiore sinistro */
      }
    
  

7.4 Esempio di implementazione completa

Esempio di implementazione completa:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Tre colonne di stessa larghezza */
        grid-template-rows: repeat(3, 100px); /* Tre righe di altezza fissa */
        gap: 10px;
        place-items: center center; /* Centratura degli elementi sia orizzontalmente che verticalmente */
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        text-align: center;
        border: 1px solid #fff;
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Esempio di allineamento degli elementi in CSS Grid</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item item1">Elemento 1</div>
            <div class="grid-item item2">Elemento 2</div>
            <div class="grid-item item3">Elemento 3</div>
            <div class="grid-item item4">Elemento 4</div>
            <div class="grid-item item5">Elemento 5</div>
            <div class="grid-item item6">Elemento 6</div>
          </div>
        </body>
      </html>
    
  

Spiegazione del codice:

• .grid-container: crea un contenitore Grid con tre colonne di stessa larghezza e tre righe di altezza fissa. Utilizza la proprietà place-items per centrare gli elementi sia orizzontalmente che verticalmente
• .grid-item: definisce gli stili di base per gli elementi della griglia, come il colore di sfondo, il colore del testo, i padding, la centratura del testo e il bordo