Praticando com o Grid

Objetivos da Aula

Mostrar como funcionam o grid do bootstrap
Mostrar as diferentes formas de grid na prática
Mostrar como o grid pode ser usado em um projeto

Snippets

O grid fica nessa parte da documentação: https://bootstrapdoconebitcode.netlify.app/pages/4grid e ele é um modo que nós temos de dividir o site, entre linhas e colunas.
Para você utilizar as linhas do grid, você precisa apenas utilizar uma classe chamada de colunas, da mesma forma que faz com a coluna, usando a classe coluna.
```
<div class="row">
	<div class="col coll">1</div>
</div>
```
Você pode usar em diversos casos diferentes essas divisões, elas se adequam a vários momentos, você pode usar em textos, usar em um navbar, usar em um layout, etc...
```
<div class="row">
	<div class="col-9">loremText100</div>
	<div class="col">loremText50</div>
</div>
```
Você pode deixar de um tamanho tipo o acima, que faz eles ficarem como um conteúdo na esquerda e um sidebar na direita. Podendo deixar eles também com o mesmo tamanho
```
<div class="row">
	<div class="col-9">loremText100</div>
	<div class="col">loremText30</div>
	<div class="col">loremText250</div>
</div>
```

No grid você também consegue fazer diferentes tipos de quebra apenas usando um adicional no nome da classe, e com isso você consegue usar diferentes tipos de colunas em diferentes tamanhos de dispositivos

<div class="row">
    <div class="col-sm coll">col BreakPoint pequeno</div>
    <div class="col-sm coll">col BreakPoint pequeno</div>
    <div class="col-sm coll">col BreakPoint pequeno</div>
    <div class="col-sm coll">col BreakPoint pequeno</div>
</div>

Um exemplo que podemos usar o gird é em um espaço de seleção para um blog, que tem posts nele, você podendo ter 3 posts por linha, que poderia ser adicionado de forma automática com um back-end, mas não iremos entrar nesse mérito.
```
<div class="row">
    <div class="col-md coll">Section1</div>
    <div class="col-md coll">Section2</div>
    <div class="col-md coll">Section3</div>
</div>
```