Objetivos da Aula

Aqui nós iremos criar um layout de estudos parecido com o que tivemos no módulo de flexbox, vai ser diferente pois nós teremos que manipular para as propriedades do grid.

Introdução

Fala programador, tudo bem com você? Nessa aula aqui, nós vamos modificar o layout de estudos que criamos lá no começo, nas aulas de flexbox.

Manipulando a pasta

Nós vamos utilizar a pasta que copiamos no começo do módulo passado.
Com essa pasta, nós podemos começar a modificar o html para termos um layout básico.

Manipulando html

O layout que nós iremos fazer é esse. Nós teremos 6 itens. Nós iremos colocar um lorem, uma dica para você usar de atalho no vscode é o atalho de lorem. O item 1 vai ter “lorem17”, o 2 vai ter “lorem22” e o 3 vai ter “lorem13”. Bom colocarmos diferentes valores para testarmos.

Bom, nós vamos começar pelo html, nós vamos colocar 3 itens primeiro com os seus lorem, depois basta copiar e colar.

<div class="container">
	<div class="item">
	  <p>lorem17</p>
  </div>
  <div class="item">
	  <p>lorem22</p>
  </div>
  <div class="item">
    <p>lorem13.</p>
  </div>
</div>

Depois desses itens criados, nós vamos copiar os 3 e colocar mais duas vezes, para ficarmos com 9.

<body>
  <div class="container">
    <div class="item">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor inventore voluptas cumque obcaecati voluptatem
        accusantium nobis commodi.
      </p>
    </div>
    <div class="item">
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum nihil soluta itaque porro, eius maxime sapiente,
        consectetur exercitationem expedita quos nemo a dignissimos.
      </p>
    </div>
    <div class="item">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, nam corporis. Ex, explicabo.
      </p>
    </div>
    <div class="item">
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam voluptates magni nesciunt excepturi
        praesentium eligendi vitae illum.
      </p>
    </div>
    <div class="item">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa reiciendis odit, accusantium eligendi,
        perspiciatis ad voluptatum similique quasi molestiae corrupti et at!
      </p>
    </div>
    <div class="item">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, qui? Eligendi, saepe dicta.
      </p>
    </div>
    <div class="item">
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam voluptates magni nesciunt excepturi
        praesentium eligendi vitae illum.
      </p>
    </div>
    <div class="item">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa reiciendis odit, accusantium eligendi,
        perspiciatis ad voluptatum similique quasi molestiae corrupti et at!
      </p>
    </div>
    <div class="item">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, qui? Eligendi, saepe dicta.
      </p>
    </div>
  </div>
</body>

Manipulando CSS

Agora vamos para o css. Será muito simples, pois nós iremos precisar apenas remover tudo do “.item”, menos o background, o font-size e a borda.
```
.item {
  background-color: white;
  border: 2px solid black;
  font-size: 20px;
}
```

Antes de finalizar, vamos colocar o font-size como 30, para ficar mais legível.

.item {
  background-color: white;
  border: 2px solid black;
  font-size: 30px;
}

Agora o nosso layout está 100% organizado. Podemos prosseguir.