Posizionamento automatico

5.1 Proprietà grid-auto-rows

CSS Grid Layout offre degli strumenti fantastici per il posizionamento automatico degli elementi nella griglia. Le proprietà grid-auto-rows, grid-auto-columns e grid-auto-flow aiutano a gestire il comportamento degli elementi che non sono posizionati in modo esplicito nella griglia. Vediamo queste proprietà più nel dettaglio.

La proprietà grid-auto-rows definisce l'altezza delle righe che vengono aggiunte automaticamente quando gli elementi superano i limiti delle righe specificate esplicitamente.

Sintassi:

    
      .grid-container {
        grid-auto-rows: value;
      }
    
  

Dove:

• value: altezza delle righe aggiunte automaticamente. Può essere specificata in diverse unità di misura (px, %, fr, auto, ecc.)

Esempio 1: Altezza delle righe fissa

In questo esempio tutte le righe aggiunte automaticamente avranno un'altezza fissa di 100px:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Tre colonne di uguale larghezza */
        grid-auto-rows: 100px; /* Le righe aggiunte automaticamente avranno un'altezza di 100px */
      }
    
  

Esempio 2: Altezza delle righe flessibile

In questo esempio le righe aggiunte automaticamente avranno un'altezza minima di 100px, ma possono crescere se necessario:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, auto); /* Altezza minima delle righe 100px, può aumentare automaticamente */
      }
    
  

5.2 Proprietà grid-auto-columns

La proprietà grid-auto-columns definisce la larghezza delle colonne che vengono aggiunte automaticamente quando gli elementi superano i limiti delle colonne specificate esplicitamente.

Sintassi:

    
      .grid-container {
        grid-auto-columns: value;
      }
    
  

Dove:

• value: larghezza delle colonne aggiunte automaticamente. Può essere specificata in diverse unità di misura (px, %, fr, auto, ecc.)

Esempio 1: Larghezza delle colonne fissa

In questo esempio tutte le colonne aggiunte automaticamente avranno una larghezza fissa di 100px:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px); /* Tre righe di altezza fissa */
        grid-auto-columns: 100px; /* Le colonne aggiunte automaticamente avranno una larghezza di 100px */
      }
    
  

Esempio 2: Larghezza delle colonne flessibile

In questo esempio le colonne aggiunte automaticamente avranno una larghezza minima di 100px, ma possono aumentare fino a una parte dello spazio libero:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        grid-auto-columns: minmax(100px, 1fr); /* Larghezza minima delle colonne 100px, può aumentare fino a una parte dello spazio libero */
      }
    
  

5.3 Proprietà grid-auto-flow

La proprietà grid-auto-flow definisce come posizionare automaticamente gli elementi nella griglia che non sono specificati esplicitamente con le proprietà grid-row e grid-column.

Sintassi:

    
      .grid-container {
        grid-auto-flow: value;
      }
    
  

Dove:

value: valore che determina l'ordine di posizionamento degli elementi. I valori possibili sono:

• row (predefinito): gli elementi sono posizionati per righe
• column: gli elementi sono posizionati per colonne
• dense: gli elementi sono posizionati con riempimento denso, senza celle vuote (usato insieme a row o column)

Esempio 1: Posizionamento per righe

In questo esempio, gli elementi saranno posizionati per righe, riempiendo le righe una dopo l'altra:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: row; /* Gli elementi sono posizionati per righe */
      }
    
  

Esempio 2: Posizionamento per colonne

In questo esempio, gli elementi saranno posizionati per colonne, riempiendo le colonne una dopo l'altra:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: column; /* Gli elementi sono posizionati per colonne */
      }
    
  

Esempio 3: Riempimento denso

In questo esempio, gli elementi saranno posizionati per righe con riempimento denso, minimizzando il numero di celle vuote:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: row dense; /* Gli elementi sono posizionati per righe con riempimento denso */
      }
    
  

5.4 Esempio di implementazione completa

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Tre colonne di uguale larghezza */
        grid-auto-rows: 100px; /* Le righe aggiunte automaticamente avranno un'altezza di 100px */
        grid-auto-flow: row dense; /* Gli elementi sono posizionati per righe con riempimento denso */
        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 di posizionamento automatico degli elementi in 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 class="grid-item">Elemento 5</div>
            <div class="grid-item">Elemento 6</div>
          </div>
        </body>
      </html>
    
  

Spiegazione del codice:

• .grid-container: crea un contenitore Grid con tre colonne della stessa larghezza e righe automatiche di altezza 100px. Gli elementi sono posizionati per righe con riempimento denso
• .grid-item: definisce gli stili di base per gli elementi della griglia, come il colore di sfondo, il colore del testo, i margini, il centraggio del testo e il bordo

1

Опрос

Basi di CSS Grid,  27 уровень,  4 лекция

недоступен

Basi di CSS Grid

Basi di CSS Grid

Открыть