Desafio de Revisão

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

Desafio

Fácil

Use CSS Grid para criar um layout limpo com um cabeçalho e uma galeria com 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>