Allineamento del contenitore Grid

8.1 Proprietà justify-content

CSS Grid Layout fornisce strumenti potenti per la gestione dell'allineamento dell'intero contenitore grid all'interno dello spazio disponibile. Le proprietà justify-content, align-content e place-content ti permettono di controllare l'allineamento di righe e colonne all'interno del contenitore, offrendo flessibilità e precisione nella creazione dei layout.

La proprietà justify-content gestisce l'allineamento orizzontale dell'intera griglia all'interno del contenitore. Questa proprietà è utile quando la dimensione del contenitore è maggiore della larghezza necessaria per la griglia stessa.

Sintassi:

    
      .grid-container {
        display: grid;
        justify-content: value;
      }
    
  

Dove: value può assumere i seguenti valori:

• start: allinea la griglia all'inizio del contenitore
• end: allinea la griglia alla fine del contenitore
• center: allinea la griglia al centro del contenitore
• stretch: estende la griglia per riempire l'intero contenitore
• space-around: posiziona spazio uguale attorno a ciascun elemento
• space-between: posiziona spazio uguale tra gli elementi
• space-evenly: posiziona spazio uguale tra gli elementi e i bordi del contenitore

Esempio 1: Allineamento all'inizio del contenitore

In questo esempio tutto il contenuto sarà allineato al bordo sinistro del contenitore:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: start; /* Allinea il contenuto al bordo sinistro del contenitore */
      }
    
  

Esempio 2: Centratura del contenuto

In questo esempio tutto il contenuto sarà centrato all'interno del contenitore:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: center; /* Centra il contenuto all'interno del contenitore */
      }
    
  

8.2 Proprietà align-content

La proprietà align-content definisce come il contenuto della griglia è allineato sull'asse verticale all'interno del grid-container. È utile quando la griglia non riempie tutto lo spazio verticale disponibile.

Sintassi:

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

Dove: value è un valore che determina l'allineamento verticale del contenuto. Valori possibili:

• start: allinea il contenuto all'inizio del contenitore
• end: allinea il contenuto alla fine del contenitore
• center: centra il contenuto all'interno del contenitore
• space-between: posiziona il contenuto con spazi uguali tra gli elementi
• space-around: posiziona il contenuto con spazi uguali attorno a ciascun elemento
• space-evenly: posiziona il contenuto con spazi uguali tra gli elementi e i bordi del contenitore
• stretch (di default): estende il contenuto per riempire tutto lo spazio disponibile

Esempio 1: Allineamento all'inizio del contenitore

In questo esempio tutto il contenuto sarà allineato al bordo superiore del contenitore:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: start; /* Allinea il contenuto al bordo superiore del contenitore */
      }
    
  

Esempio 2: Centratura del contenuto

In questo esempio tutto il contenuto sarà centrato all'interno del contenitore:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: center; /* Centra il contenuto all'interno del contenitore */
      }
    
  

8.3 Proprietà place-content

La proprietà place-content è un'abbreviazione per assegnare contemporaneamente i valori di justify-content e align-content.

Sintassi:

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

Dove:

• justify-value: valore per l'allineamento orizzontale (justify-content)
• align-value: valore per l'allineamento verticale (align-content)

Esempio 1: Centratura del contenuto in orizzontale e verticale

In questo esempio tutto il contenuto sarà centrato all'interno del contenitore sia orizzontalmente che verticalmente:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: center center; /* Centra il contenuto sia in orizzontale che in verticale */
      }
    
  

Esempio 2: Stretching del contenuto in larghezza e allineamento al bordo superiore

In questo esempio il contenuto sarà esteso per riempire la larghezza del contenitore e allineato al bordo superiore:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: stretch start; /* Estende il contenuto in larghezza e allinea al bordo superiore */
      }
    
  

8.4 Esempio di implementazione completa

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px); /* Tre colonne di larghezza fissa */
        grid-template-rows: repeat(3, 100px); /* Tre righe di altezza fissa */
        gap: 10px;
        place-content: center center; /* Centra il contenuto sia in orizzontale che in verticale */
      }

      .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 del contenitore 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 larghezza fissa e tre righe di altezza fissa. Utilizza la proprietà place-content per centrare il contenuto 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