Défi récapitulatif

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

Défi

Facile

Utilisez CSS Grid pour construire une mise en page propre 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 en utilisant :
grid-template-areas: "header header header" "img1 img2 img3";
Attribuez chaque élément de la grille à sa zone en utilisant 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>