Desafio de Revisão

Parte da seção CSS Mastery do Journey de HTML da Coddy. Lição 34 de 43.

Desafio

Fácil

Use CSS Grid para construir um layout limpo com um cabeçalho e uma galeria de 3 imagens em uma linha, como na imagem abaixo:

Defina .container como display: grid e adicione um gap entre os itens.
Crie uma grade com 2 linhas e 3 colunas.
Defina as áreas da grade usando:
grid-template-areas: "header header header" "img1 img2 img3";
Atribua cada item da grade à sua área usando a propriedade grid-area.

Experimente você mesmo

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