Objetivos da Aula

Usar na prática o grid
Entender na prática as funcionalides que estudamos

Criando os arquivos

Nós vamos criar uma página do 0 para esse nosso exercício, vamos criar os arquivos e linkar o css.

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Projeto grid</title>
</head>

<body></body>

</html>

Criando a estrutura HTML.

Nós podemos então começar. A estrutura que iremos fazer vai ser até um pouco semelhante a que fizemos no flexbox. Vamos fazer um container que vai englobar o header, conteúdo e o footer.

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Projeto Flexbox</title>
</head>

<body>
  <div class="container">
    <header class="header">
      <p>HEADER</p>
    </header>
    <section class="content"></section>
    <footer class="footer">
      <p>FOOTER</p>
    </footer>
  </div>
</body>

</html>

Agora vamos colocar os itens, nós vamos usar 6 itens.

<body>
  <div class="container">
    <div class="header">
      <p>HEADER</p>
    </div>
    <section class="content">
      <div class="item">
        <p>ITEM</p>
      </div>
      <div class="item">
        <p>ITEM</p>
      </div>
      <div class="item">
        <p>ITEM</p>
      </div>
      <div class="item">
        <p>ITEM</p>
      </div>
      <div class="item">
        <p>ITEM</p>
      </div>
      <div class="item">
        <p>ITEM</p>
      </div>
    </section>
    <div class="footer">
      <p>FOOTER</p>
    </div>
  </div>
</body>

Agora, nós iremos colocar uma classe única em todos os itens, pois nós precisamos deixar eles únicos para podermos manipular cada um.

<body>
  <div class="container">
    <div class="header">
      <p>HEADER</p>
    </div>
    <section class="content">
      <div class="item item1">
        <p>ITEM</p>
      </div>
      <div class="item item2">
        <p>ITEM</p>
      </div>
      <div class="item item3">
        <p>ITEM</p>
      </div>
      <div class="item item4">
        <p>ITEM</p>
      </div>
      <div class="item item5">
        <p>ITEM</p>
      </div>
      <div class="item item6">
        <p>ITEM</p>
      </div>
    </section>
    <div class="footer">
      <p>FOOTER</p>
    </div>
  </div>
</body>

Manipulando o css

Agora partindo para o css, nós iremos começar com a estrutura que vinhemos trabalhando nela, nós vamos remover o padding e o margin, colocar o box-sizing e a fonte.
```
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 20px;
}
```
Agora vamos colocar as configurações no container, vamos ter o background nele, a altura mínima e o flex configurado.
```
.container {
  background-color: darkgray;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
```
Nós vamos colocar agora a configuração do header, vamos colocar o background com a borda e também as suas dimensões.
```
.header {
  background-color: white;
  border: 2px solid black;
  width: 100%;
  height: 60px;
}
```
Agora nós vamos colocar o flex dentro do conteúdo principal e também um pequeno padding, para os itens não ficarem colado nas paredes dessa seção.
```
.main-content {
  flex: 1 0 auto;
  padding: 10px;
}
```
Com isso o content já está crescido, deixando o footer no finla da página. Nós iremos agora configurar o grid, vamos colocar 3 colunas e o tamanho mínimo e máximo da linha.
```
.main-content {
  flex: 1 0 auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
```
Antes de configurar as linhas, nós vamos deixar os itens visíveis, pois nós agora não conseguimos ver nada direito, então vamos deixar um background e uma borda.
```
.item {
  background-color: white;
  border: 2px solid black;
}
```

Agora que estamos vendo, nós vamos colocar o template-areas. Vamos também colocar um gap, para não ficarem colados um nos outros.

.main-content {
  flex: 1 0 auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "item1 item2 item3"
    "item4 item4 item4"
    "item5 item5 item6";
  gap: 5px;
}

Agora só falta colocar o grid-area nos itens de forma separada.

.item1 {
  grid-area: item1;
}
.item2 {
  grid-area: item2;
}
.item3 {
  grid-area: item3;
}
.item4 {
  grid-area: item4;
}
.item5 {
  grid-area: item5;
}
.item6 {
  grid-area: item6;
}

Podemos ver que tomou forma, faltando apenas o footer, que é igual ao header, então podemos copiar e mudar o nome da classe.
```
.footer {
  background-color: white;
  border: 2px solid black;
  width: 100%;
  height: 60px;
}
```

Objetivos da Aula

Criando os arquivos

Criando a estrutura HTML.

Manipulando o css

Responsividade