Em um dos primeiros tutoriais sobre Grades do CSS, vimos as colunas fluidas e espaçamentos. Aprendemos que não é necessário especificar, exatamente, o posicionamento dos itens. Ao declarar as propriedades da nossa grade, a Grade encaixará os items usando seu algoritmo de ato-posicionamento.

Nesse tutorial, veremos como esse algoritmo funciona e como influenciá-lo.

Preparação

Se o navegador não suporta Grades, é preciso fazê-lo suportar para acompanhar o tutorial: Leia isso:

• 

  Layout em Grade do CSS: Um Guia de Início Rápido

  A forma como criamos layouts na web está mudando e, liderando, temos o Layout em Grade do CSS. Esse guia de início rápido pulará os detalhes e...

Tudo Começa Com a Grade

Eis uma demo para começarmos. É um container em que declaramos disply: grid; e envolve dezoito elementos filhos. Dissemos que deve ter cinco colunas de mesma largura e, se possível, o mesmo número de linhas, com cerca de 2px de espaçamento.

1

  grid-template-columns: repeat(5, 1fr);

2

  grid-template-rows: repeat(5, 1fr);

3

  grid-gap: 2px;

Como se vê, a Grade pegou os dezoitos itens e os posicionou, lada-a-lado, do topo esquerdo ao rodapé direito. Esse comportamento é bem parecido com o das flutuações.

Nota: o comportamento esquerda-para-direita seria o inverso se tivéssemos um layout direction: RTL;.

Alguns Ajustes

Tudo muito bom, mas vejamos o que acontece quando os itens não se encaixam perfeitamente. Adicionaremos algumas regras ao .item-7, fazendo-o ocupar duas colunas e duas linhas:

1

.item-7 {

2

  background: #e03f3f;

3

  grid-column: span 2;

4

  grid-row: span 2;

5

}

Como ele está?

Nada mal! O .item-7 ocupa mais espaço e os .item-8 e .item-9 são posicionados mais adiante. O .item-10 busca um espaço próximo ao .item-9 e ao perceber que não há, vai para um linha abaixo e começa de novo, da esquerda. Os outros items continuam a preencher da mesma forma.

Mas espere, e se o .item-9 também fosse maior?

Agora ficou interessante: .item-9 não cabe mais em uma só coluna, logo é empurrado uma linha para baixo. Por não caber nada mais além de .item-7, ele fica ali, no lugar. O .item-10, por sua vez, iria para baixo do .item-6 mas, lembre-se, ele busca uma coluna vaga e, não encontrando, vai para a próxima linha e recomeça da esquerda novamente. Esse é um conceito muito importante a entender.

Diga "Olá" ao grid-auto-flow

Se olharmos a demo anterior, veremos que o .item-18 ao não encontrar espaço próximo ao .item-17, desceu uma linha. Definimos apenas cinco linhas, mas a Grade assumiu que queríamos outra linha para continuar. Isso se deve ao grid-auto-flow, pertencente ao elemento Grade, que possui valor padrão row. Podemos mudar esse valor para column se quisermos, alterando o visual da grade:

É familiar, mas é perceptível que os itens começaram do topo esquerdo e moveram-se para baixo e só depois para direita, para criar a segunda coluna e por aí vai. Agora, quando um item é muito grande, o próximo item procurará a próxima linha com espaço, falhando nisso, irá para uma próxima coluna.

Compactar Faz Bem

Podemos adicionar outra palavra-chave à nossa propriedade grid-auto-flow, provavelmente, a minha favorita do CSS até agora: dense. E sua contraparte padrão é sparse (minha segunda favorita). Façamos o seguinte:

1

grid-auto-flow: row dense;

Nota: não precisamos incluir row aqui, fica implícito, mas destaca o funcionamento da sintaxe.

Nosso amigo .item-10 ao perceber que não há espaço próximo ao .item-9, verificará se há espaço livre acima, antes de prosseguir para outra linha.

Graças a essa mudanças no algoritmo de posicionamento, nossos itens estão compactos, dando-nos uma grade preenchida eficientemente. Isso significa, contudo, que o layout visual não reflete, necessariamente, a ordem do código fonte, o que pode não ser muito útil para o usuário.

Conclusão

Recapitulemos:

1. Se não especificarmos a localização de um item, o algortimo de auto-posicionamento da Grade o posicionará no próximo espaço vazio (grande o suficiente).
2. Não havendo espaço na linha atual, procurará na próxima linha, mesmo que haja espaços na atual.
3. Podemos alterar a ordem de busca alterando grid-auto-flow de row para column.
4. grid-auto-flow aceita uma palavra-chave para descrever o tipo de "empacotamento". Por padrão, sparse, mas podemos usar dense para preencher todos os espaços vazios.
   

Recursos Úteis

• grid-auto-flow na MDN
• A especificação da propriedade grid-auto-flow