Grid css (Resumao)

Colocando o grid no contêiner

display :grid

O display grid também gera as tags :

Grid-template-columns : propriedades da exibição do conteúdo

Gap : espaçamento entre os elementos

grid-template-columns : 1fr 1fr 
// Criou 2 colunas , o fr eh uma propriedade própria do grid , usada
para definir tamanhos de colunas

Gap: 20px;
// Separa as colunas de forma igualitária

Align content⇒ espaçamento na vertical

Justify contente ⇒espaçamento na horizontal

Align-items ⇒espaçamento vertical dos itens

Justify-items ⇒espaçamento horizontal dos itens

Place-items ⇒os 2 acima

Align-self ⇒ espaçamento vertical do item selecionado

Justify-self ⇒ ... Do item selecionado

Place-self ⇒os 2 acima

Grid column

grid-column: 1 / 3// O item ocupará a coluna 1 e 2 (Sim, isso mesmo, 1 e 2, pois os valores 1 / 3 são referentes as linhas da coluna. Isso significa que começa na linha 1 (início do grid) e vai até a linha 3, que é o começo da terceira coluna).

grid-column: 1// O item ocupará a coluna 1.

Define quais colunas serão ocupadas pelo grid item. É possível definir uma linha de

início e final, assim o item irá ocupar múltiplas colunas.