Objetivos da Aula

Entender o que grid container na prática
Entender as principais funcionalidades do grid container
Entender os comportamentos das linhas e colunas.

Introdução

Fala programador, tudo bem com você? Nessa aula aqui, nós vamos entender a manipulação do grid-container. Diferente do flexbox, a maioria das manipulações que nós iremos fazer não está aqui, e está nos “itens”, que nesse caso, vão ser as linhas e colunas.

Definindo o grid

Assim como nós temos no flexbox, nós vamos definir o grid no nosso container

.container {
  background-color: darkgray;
  min-height: 100vh;
  display: grid;
}

Só por colocarmos o grid, os itens que temos ficaram preenchendo todo o espaço que temos.

Entendendo as colunas do grid.

Nós vamos então colocar as colunas do grid. Nós temos então 9 itens, nós vamos então criar 3 colunas. As colunas são criadas por “grid-template-column”. Dentro desse método nós vamos definir quantas colunas vão ter por linha e os seus tamanhos. Vamos começar com %, pois px não é a melhor opção para usar, pois nós vamos ter responsividade nenhuma.
```
.container {
  background-color: darkgray;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 25% 50% 25%;
}
```
Nós podemos ver que nós ficamos agora com 3 colunas, duas iguais e uma no meio maior. Só que, o melhor que podemos utilizar aqui no grid não é %, é frame. Pois ele vai acabar sendo mais responsivo.
```
.container {
  background-color: darkgray;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
```
Nós também temos a possibilidade de usar um repeat, que ele vai de forma automática colocar esses frames para nós. Caso a gente queira ter 3 colunas iguais, nós vamos colocar ele.
```
.container {
  background-color: darkgray;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
```
Dessa forma nós vamos estar dizendo que queremos 3 colunas de 1 frame cada.

Entendendo o gap

Assim como nós temos em flexbox, aqui também temos o gap, e funciona exatamente igual, tanto para coluna quando para linha. Nós vamos então definir através do nosso “atalho”, esses nossos espaçamentos.
```
.container {
  background-color: darkgray;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px 15px;
}
```
Nós vamos então deixar dessa forma e vamos prosseguir.

Entendendo o grid-template-rows & grid-auto-rows

Agora com as linhas, nós vamos ter a mesma coisa que tivermos nas colunas, caso a gente queira 3 linhas iguais, a gente usa o reapt, só que nós iremos deixar a linha do meio maior.
```
.container {
  background-color: darkgray;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 2fr 1fr;
}
```
Dessa forma as linhas vão estar do jeito que determinamos, a do meio maior. Nós vamos aproveitar para entender outra propriedade das linhas que é o auto-rows.