O que é o DOM? Significa Document Object Model ,usado para manipular conteúdos,estilos e estrutura do nosso documento HTML. Se você é um desenvolvedor web é crucial que você saiba usar o Javascript(DOM), para saber como os frameworks front-ends funcionam por debaixo do pano. Ou a empresa que você trabalha ainda utiliza o html e javascript sem nenhum framework. Arvore DOM O dom trabalha com todos os elementos que estão dentro da tag html assim como na arvore acima. selecionando elementos do html podemos selecionar os documentos html, por classe ,id, tag ou ate mesmo pelo query que seleciona como o CSS. veremos aqui as funções que selecionam nossos elementos. getElementById() // seleciona por id getElementByClass() // seleciona por classe getElementByTagName() // seleciona por <tag> querySelector() // seleciona tipo CSS mas apenas o primeiro elemento querySelectorAll() // seleciona tipo CSS mas todos os elementos para usarmos essas funções nos precisamos colocar o objeto documen
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.
Comentários
Postar um comentário