Objetivos da Aula

Enteder as funcionalidades das linhas e colunas
Entender como manipular todas as linhas e colunas que temos.

Introdução

Fala programador, tudo bem com você? Nessa aula aqui, nós vamos ver 65% do grid, onde nós temos as linhas e colunas, com elas, nós vamos conseguir fazer a maior parte das manipulações do grid.

Manipulando html

Nós iremos primeiro colocar uma classe individual em todos os itens para manipularmos.

<body>
  <div class="container">
    <div class="item item1">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor inventore voluptas cumque obcaecati voluptatem
        accusantium nobis commodi.
      </p>
    </div>
    <div class="item item2">
      <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 item3">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, nam corporis. Ex, explicabo.
      </p>
    </div>
    <div class="item item4">
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam voluptates magni nesciunt excepturi
        praesentium eligendi vitae illum.
      </p>
    </div>
    <div class="item item5">
      <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 item6">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, qui? Eligendi, saepe dicta.
      </p>
    </div>
    <div class="item item7">
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam voluptates magni nesciunt excepturi
        praesentium eligendi vitae illum.
      </p>
    </div>
    <div class="item item8">
      <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 item9">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, qui? Eligendi, saepe dicta.
      </p>
    </div>
  </div>
</body>

Com isso, faremos algumas manipulações individuais.

Entendendo grid-column

No grid-column nós vamos poder fazer uma manipulação nos itens, fazendo com que eles cesçam de acordo com o que colocamos. Eles vão respeitar linhas, contando da primeira na esquerda para a direita, se nós temos 3 colunas, vamos ter 4 linhas, então iremos usar isso.
```
.item1 {
  grid-column: 1/4;
}
```
Podemos ver que o nosso item 1 ficou preenchendo de ponta a ponta a nossa página, que poderia ser um header nesse lugar, mas já adianto a você que não vamos usar o grid para fazer headers. Nós vamos agora modificar o item 2, ele vai ocupar apenas 3 linhas, deixando uma para o item 3, que poderia ser classificado como uma sidebar, por exemplo.
```
.item2 {
  grid-column: 1/3;
}
```
Agora, iremos modificar o item 5 para preencher da linha 2 até a linha 4, fazendo com que o nosso a gente tenha na linha abaixo da que a gente acabou de criar, um sidebar do outro lado.
```
.item5 {
  grid-column: 2/4;
}
```
Agora, eu quero que você faça a seguinte continuação de layout, a partir do item 6 você vai começar a manipular para deixarmos dessa forma.
Agora, nós vamos prosseguir juntos. O item 6 vai preencher do 1 ao 3
```
.item6 {
  grid-column: 1/3;
}
```
Nós vamos ter agora que manipular o item 8, que vai preencher apenas a linha 3 a 4, deixando aquele espaço vazio, e nós vamos também ter o item 9 preenchendo igual ao item 1.
```
.item8 {
  grid-column: 3/4;
}
.item9 {
  grid-column: 1/4;
}
```

Entendendo grid-row

O grid-row é quase que o irmão do grid-column, ele vai atuar de uma maneira muito parecida, só que com as linhas. Nós vamos então colocar que o item 6 vai ocupar o espaço sobrando que ele tem. Assim como a coluna, nós vamos começar a cor as linhas, começando pela primeira linha que temos, nós vemos que na ordem ela é a 4º e ela termina na 5º, vamos então colocar ela para terminar na 6º.
```
.item6 {
  grid-column: 1/3;
  grid-row: 4/6;
}
```
Isso também funciona para outras linhas, mas se nós colocarmos um tamanho maior em algunas linhas, nós vamos acabar quebrando as colunas, então apenas isso para o nosso exemplo está bom.

Entendendo grid-template-areas

No grid template areas é um modo que nós temos de desenhar o nosso layout, com ele, nós vamos basicamente o grid-column e o grid-row de forma “facilitada”, fazendo com que a gente consiga montar layouts de uma forma até mais visual.