Sfida di ripasso

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

Sfida

Facile

Usa CSS Grid per creare un layout semplice con un'intestazione e una galleria di 3 immagini disposte su un'unica riga, come nell'immagine qui sotto:

Imposta .container su display: grid e aggiungi uno spazio gap tra gli elementi.
Crea una griglia con 2 righe e 3 colonne.
Definisci le aree della griglia usando:
grid-template-areas: "header header header" "img1 img2 img3";
Assegna ogni elemento della griglia alla relativa area usando la proprietà grid-area.

Provalo tu

<!DOCTYPE html>
<html>
<head>
  <style>
    body{
        margin: 0;
        padding: 0;
    }
    img{
        width: 100%;
    }
    .header{
        text-align: center;
        padding: 10px;
        background-color: #afe1e3; 
    }
    /* Add you CSS code here */

  </style>
</head>
<body>
  <div class="container">
    <div class="header">My Gallery</div>
    <div class="img1"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Burchell%27s_zebra_%28Equus_quagga_burchellii%29_2.jpg"></div>
    <div class="img2"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Zebra_zebras_-_tarangire_tanzania_africa.jpg"></div>
    <div class="img3"><img src="https://upload.wikimedia.org/wikipedia/commons/1/11/Zebra-Lake_Nakuru.jpg"></div>
</div>
</body>
</html>