Nozioni di base della griglia

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 31 di 43.

CSS Grid è un sistema di layout che ti permette di creare facilmente pagine web con righe e colonne. È ottimo per realizzare layout complessi e responsivi senza dover ricorrere ai float o a posizionamenti complicati. Inoltre, funziona in tutti i browser moderni.

Per creare un contenitore a griglia, usa la proprietà display:

.container {
  display: grid;
}

Definisci le colonne nella tua griglia usando grid-template-columns con unità px o fr (frazioni):

/* Questo crea tre colonne, in cui la colonna centrale occupa il doppio dello spazio rispetto a ciascuna delle altre due. */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Definisci le righe con grid-template-rows. Usa la proprietà gap per aggiungere spazio tra gli elementi della griglia.

/* Crea una griglia con due righe: la prima è alta 100px, la seconda 200px */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

Sfida

Facile

Crea una regola CSS per una classe denominata grid-container che:

Imposta la proprietà display in modo da creare una griglia
Crea tre colonne di larghezza uguale usando l’unità fr
Crea due righe: la prima alta 150px e la seconda alta 250px
Aggiunge uno spazio di 20px tra tutti gli elementi della griglia

Scrivi solo il codice CSS per la classe grid-container.

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>