Desafío de repaso

Parte de la sección CSS Mastery del Journey de HTML de Coddy. Lección 34 de 43.

Desafío

Fácil

Usa CSS Grid para construir un diseño limpio con un encabezado y una galería de 3 imágenes en una fila como en la imagen de abajo:

Establece .container como display: grid y añade un gap entre los elementos.
Crea una cuadrícula con 2 filas y 3 columnas.
Define las áreas de la cuadrícula usando:
grid-template-areas: "header header header" "img1 img2 img3";
Asigna cada elemento de la cuadrícula a su área usando la propiedad grid-area.

Pruébalo tú mismo

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