Definizione di righe e colonne

3.1 Proprietà grid-template-columns

CSS Grid Layout ti permette di creare layout complessi delle pagine web usando righe e colonne. Due proprietà chiave per definire la struttura della griglia sono grid-template-rows e grid-template-columns. Queste proprietà permettono di impostare il numero e le dimensioni di righe e colonne nel contenitore Grid, dando ai developer il controllo completo sulla disposizione degli elementi.

La proprietà grid-template-columns definisce il numero e le dimensioni delle colonne nella griglia. Accetta uno o più valori, che possono essere specificati in differenti unità di misura, come pixel (px), percentuali (%), unità di flessibilità (fr), e altre.

Esempio 1: Impostazione delle dimensioni fisse delle colonne

In questo esempio la griglia avrà tre colonne. La prima colonna sarà larga 100px, la seconda colonna sarà larga 200px, e la terza colonna sarà larga 100px:

    
      .grid-container {
        display: grid;
        grid-template-columns: 100px 200px 100px; /* Tre colonne con dimensioni fisse */
      }
    
  

Esempio 2: Utilizzo delle unità di flessibilità (fr)

In questo esempio la griglia avrà tre colonne. La prima e la terza colonna occuperanno una quantità uguale di spazio, mentre la seconda colonna sarà due volte più larga di ognuna di esse:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr; /* Tre colonne con dimensioni flessibili */
      }
    
  

Esempio 3: Utilizzo della ripetizione (repeat)

In questo esempio si utilizza la funzione repeat, che permette di semplificare la scrittura. La griglia avrà tre colonne di larghezza uguale:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Tre colonne uguali */
      }
    
  

Esempio 4: Impostazione delle dimensioni minime e massime (minmax)

In questo esempio ogni una delle tre colonne avrà una larghezza minima di 100px e una dimensione flessibile che può aumentare fino a 1fr a seconda dello spazio disponibile:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Tre colonne con larghezza minima di 100px e dimensioni flessibili */
      }
    
  

3.2 Proprietà grid-template-rows

La proprietà grid-template-rows è simile a grid-template-columns, ma definisce il numero e le dimensioni delle righe nella griglia. Accetta anch'essa uno o più valori, che possono essere specificati in differenti unità di misura.

Esempio 1: Impostazione delle dimensioni fisse delle righe

In questo esempio la griglia avrà tre righe. La prima riga sarà alta 50px, la seconda riga sarà alta 100px, e la terza riga sarà alta 50px:

    
      .grid-container {
        display: grid;
        grid-template-rows: 50px 100px 50px; /* Tre righe con dimensioni fisse */
      }
    
  

Esempio 2: Utilizzo delle unità di flessibilità (fr)

In questo esempio la griglia avrà tre righe. La prima e la terza riga occuperanno una quantità uguale di spazio, mentre la seconda riga sarà due volte più alta di ognuna di esse:

    
      .grid-container {
        display: grid;
        grid-template-rows: 1fr 2fr 1fr; /* Tre righe con dimensioni flessibili */
      }
    
  

Esempio 3: Utilizzo della ripetizione (repeat)

In questo esempio si utilizza la funzione repeat, che permette di semplificare la scrittura. La griglia avrà tre righe di altezza uguale:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 1fr); /* Tre righe uguali */
      }
    
  

Esempio 4: Impostazione delle dimensioni minime e massime (minmax)

In questo esempio ogni una delle tre righe avrà un'altezza minima di 50px e una dimensione flessibile che può aumentare fino a 1fr a seconda dello spazio disponibile:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, minmax(50px, 1fr)); /* Tre righe con altezza minima di 50px e dimensioni flessibili */
      }
    
  

3.3 Combinazione delle proprietà

Combinazione delle proprietà grid-template-rows e grid-template-columns

Queste proprietà possono essere usate insieme per creare griglie complesse con differenti dimensioni di righe e colonne.

In questo esempio la griglia avrà due colonne: la prima colonna occuperà 1 parte dello spazio disponibile, mentre la seconda colonna — 2 parti. La griglia avrà anche due righe: la prima riga sarà alta 100px, e la seconda riga sarà alta 200px.

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
      }
    
  

Esempio di implementazione completa:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
        gap: 10px;
      }

      .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 CSS Grid</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item">Elemento 1</div>
            <div class="grid-item">Elemento 2</div>
            <div class="grid-item">Elemento 3</div>
            <div class="grid-item">Elemento 4</div>
          </div>
        </body>
      </html>
    
  

Spiegazione del codice:

• .grid-container: definisce il contenitore come grid-container con due colonne e due righe. Gli spazi tra gli elementi sono impostati tramite la proprietà gap
• .grid-item: definisce gli stili di base per gli elementi della griglia, come il colore di sfondo, il colore del testo, i padding, il centraggio del testo e il bordo