Défi récapitulatif

Fait partie de la section Maîtrise du CSS du Journey HTML de Coddy. Leçon 34 sur 43.

Défi

Facile

Utilisez CSS Grid pour créer une mise en page claire avec un en-tête et une galerie de 3 images sur une seule ligne, comme sur l’image ci-dessous :

Définissez .container sur display: grid et ajoutez un gap entre les éléments.
Créez une grille avec 2 lignes et 3 colonnes.
Définissez les zones de la grille à l’aide de :
grid-template-areas: "header header header" "img1 img2 img3";
Attribuez chaque élément de la grille à sa zone à l’aide de la propriété grid-area.

Essayez vous-même

<!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>