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>