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.
Top comments (0)