Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout

Entendendo o "Algoritmo de Auto-Posicionamento" da Grade do CSS

by
Read Time:4 minsLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Going Responsive With auto-fill and minmax()
Quick Tip: Name Your CSS Grid Lines, Just in Case

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

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:

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.

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:

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:

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.