Objetivos da Aula

• Ter uma visão geral sobre o grid.
• Entender o que é, para que serve e como é utilizado.

Introdução

Fala programador, tudo bem com você? Nessa aula aqui, nós vamos ter uma visão geral sobre o grid, entender de forma mais teórica o que ele é, como funciona e para o que serve.

O que é o css grid

1. O que é: Assim como o flexbox, o grid é um organizador de layout. Com ele nós vamos ter uma divisão de linhas e colunas, diferente da divisão de linha e coluna do flexbox, a do grid é muito mais organizada se você quiser linhas e colunas definidas.
2. Para que serve: O grid ele serve para como foi dito, ter linhas e colunas. Ou seja, você poderia por exemplo, ter um layout de um blog, onde nós temos uma coluna para o conteúdo principal e uma lateral sendo o sidebar.
3. Quando é utilizado: Como foi explicado no tópido “para o que serve”, ele vai ser utilizado em momentos que a gente queira ter divisão de colunas, tipo conteúdo principal e barra lateral. Só que, nós também podemos ter uma linha que tem duas colunas de tamanhos iguais, cada uma com o seu conteúdo, por exemplo, nossa página inicial do onebitflix.

   1. Nós temos no onebitflix, na esquerda uma coluna para textos e na direita uma coluna para imagem. Nós temos essas duas colunas envoltas por uma linha, e a responsividade sendo aplicada para elas.

      

   2. Quando a tela diminui, elas ficam uma abaixo da outra, fazendo com que a responsividade seja aplicada e a gente tenha esse visual com as colunas.