Nessa quinta parte da série aprenda grid vamos falar de uma coisa bem bacana: ordem.
Vamos aprender como modificar a ordem de exibição dos elementos SEM MEXER no documento HTML.
Existem basicamente 2 propriedades para trabalharmos: order e grid-auto-flow.
grid-auto-flow
Primeiramente vou mostrar a propriedade grid-auto-flow. Mas antes de tudo, crie uma grid com 8 elementos/divs (lembrando que todo o código deste post está no Github)
Vou pular a parte de criação, pois você aprendeu isso na parte 1.
A grande jogada é que na definição da grid podemos adicionar a grid-auto-flow. Ela pode receber dois tipos de valores: row ou column. O valor row é valor padrão quando se cria uma grid, ou seja, não precisa definir a grid-auto-flow para ter esse valor "funcionando". Porém, se quiser definir, não tem problema.
Ex. de código:
.grid{
display: grid;
grid-template-columns: repeat(4, 2fr);
grid-template-rows: 100px 100px;
grid-gap: 10px;
grid-auto-flow: column;
}
Agora olhe o que acontece:
Veja que os nossos elementos estão ordenados não em linhas, mas sim em colunas.
Assim podemos presumir que grid-auto-flow: row; irá ordenar os elementos em linha. Que é o padrão, como eu disse.
Bem legal né : )
order
A propriedade order é outra coisa bem legal para as grids. Com ela, podemos mudar a ordem de quantos elementos quisermos.
Imagine que você tenha que trazer somente o elemento 6 para a frente e o resto deve ficar como está. Pois saiba que graças a propriedade order podemos fazer isso rapidamente.
OBS: a propriedade order recebe valores inteiros, como 1, 2, 3, etc...
Mas o que quer dizer esses números?
Os números funcionam como uma lista de prioridade, onde o menor número sempre tem mais prioridade em cima dos outros. Fazendo assim, "ser exibido" primeiro.
Outra analogia é comparar os valores da order com senhas. Onde quem tem a menor senha sempre vai ser chamado primeiro.
Vejamos o exemplo:
.grid-item{
order: 3;
color: white;
padding: 20px;
}
.element-5{
order: 1;
}
.element-8{
order: 2;
}
*grid-item são todas as divs da nossa grid.
**cada div tem uma classe chamada element-SEU_NUMERO.
Entenda o que está acontecendo: Primeiro estamos definindo o valor de order 3 para TODAS AS DIVS; Depois estamos mudando o valor de order de algumas específicas.
Então, a partir desse exemplo temos o seguinte resultado:
Veja que o elemento 5 foi o primeiro a ser exibido na tela, afinal, ele é quem possui a menor senha. Ele tem mais prioridade. Logo após aparece o elemento 8, e por fim temos todo o resto, já que eles têm a mesma prioridade: a ordem 3.
Agora quero que você atente para uma coisa: se você mudar a ordem do elemento 8 para 10 e em .grid-item para 19, temos exatamente o mesmo resultado. Afinal, 10 é menor que 19, então ele vai ser chamado primeiro.
Cuidado com isso! Tem gente que acha que order é a posição do elemento.
Essas técnicas são bem eficazes e simples. Podem te poupar muito tempo em futuros projetos.
Te aguardo no próximo post ; )