Na parte 1 sobre diquinhas marotas de CSS Grid, apresentamos a possibilidade de usar valores negativos para várias propriedades de CSS Grid, dicas para pseudo-elementos, propriedades de CSS Grid que podem ser animadas e mais.

Nesta segunda e última parte da série, vejamos quais outras diquinhas são úteis para acessar funcionalidades quase-ocultas de CSS Grid.

Como a shorthand grid funciona

Às vezes, ler e entender código relacionado a CSS Grid pode ser difícil. Por exemplo, ler e entender como usar a forma abreviada (shorthand) de Grid corretamente. Consta na especificação:

Se você tem alguma experiência com leitura de documentações técnicas, pode não ser tão complicado, mas a maioria não tem. Para estes, uma nota na especificação pode ajudar bastante:

Você pode especificar as propriedades de Grid explícitas ou implícitas apenas em uma única declaração.

Ou seja, é possível especificar múltiplas propriedades usando a shorthand grid, mas não todas elas de uma só vez. Seguem alguns exemplos.

Usando grid ao invés de grid-template

A propriedade grid-template é uma forma abreviada de configurar grid-template-columns, grid-template-rows e grid-template-areas em uma única declaração. Também é possível fazer o mesmo com a abreviação grid, que é um pouco mais curta.

Essa shorthand cria 3 linhas e 2 colunas, com 4 áreas de grid nomeadas. A primeira linha tem uma altura explícita de 200px, enquanto a segunda e a terceira têm uma altura implícita de auto. A primeira coluna tem uma largura de 1fr e a segunda uma largura de 2fr.

See the Pen grid shorthand – areas, explicit rows and columns by Manuel Matuzovic (@matuzo) on CodePen.

Não é preciso especificar áreas se não forem necessárias. É possível usar a shorthand de grid apenas para definir linhas e colunas explícitas. Os dois trechos a seguir estão basicamente fazendo a mesma coisa:

Lidando com linhas e colunas implícitas

Também é possível usar grid para especificar grid-auto-flow, mas isso não funciona exatamente como se poderia esperar; não é apenas adicionar row ou column em algum lugar na declaração. Em vez disso, é preciso usar a palavra-chave auto-flow no lado correto da barra.

Se estiver à esquerda da barra, a shorthand define grid-auto-flow como row e cria colunas explícitas.

Se estiver à direita da barra, a shorthand define grid-auto-flow para column e cria linhas explícitas.

Também é possível definir o tamanho de tracks implícitas junto com a palavra-chave auto-flow, que define respectivamente grid-auto-rows ou grid-auto-columns para o valor especificado.

See the Pen grid shorthand – explicit rows and implicit columns by Manuel Matuzovic (@matuzo) on CodePen.

Feature Queries no Edge

Verificar o suporte para CSS Grid funciona muito bem com Feature Queries porque todos os navegadores que suportam Grid também entendem feature queries. Isso significa que é possível verificar se um navegador suporta as especificações antigas ou novas — ou ambas: começando com o Edge 16, ele não suporta apenas as novas especificações, mas também as antigas.

Então, se for necessário diferenciar entre as versões do Edge que suportam as novas especificações e as que não, é preciso escrever as queries assim:

Eis uma pequena demonstração prática que mostra quais feature queries são acionadas no navegador usado para a visita ao site naquele momento:

See the Pen display: grid support test by Manuel Matuzovic (@matuzo) on CodePen.

Especificando o número exato de itens por coluna

CSS Grid é excelente para layouts, e também pode ser muito útil a nível de componentização. Uma das melhores capacidades em relação a isso é a possibilidade de especificar a quantidade exata de itens por coluna em um componente de várias colunas.

Por exemplo, se se tiver uma lista de 11 itens e for necessário adicionar uma nova coluna após cada 4º item. A primeira coisa a fazer depois de definir display: grid no elemento-pai é alterar a maneira como o algoritmo de posicionamento automático de grid funciona. Por padrão, ele preenche completamente cada linha, adicionando novas linhas conforme necessário. Definindo grid-auto-flow para column, a grid preencherá cada coluna.

A última coisa é especificar o número de itens por coluna. Isso é possível definindo quantas linhas explícitas forem necessárias usando a propriedade grid-template-rows. Também convém definir a altura de cada linha explicitamente — ou apenas torná-las tão grandes quanto seu conteúdo usando a palavra-chave auto.

See the Pen Limited number of items per column by Manuel Matuzovic (@matuzo) on CodePen.

Conclusão das diquinhas marotas de CSS Grid

Juntando a parte 1 das diquinhas marotas de CSS Grid e mais estas, que acabaram de ser apresentadas, temos uma coletânea de “quick tips” interessante e bastante útil de sere lembrada quando estiver trabalhando com CSS Grid Layout.

Logicamente, continuaremos apresentando mais dicas de CSS Grid, mas este foi o último artigo desta minssérie de dicas rápidas de CSS Grid. Se tiver mais alguma dica rápida de CSS Grid, comenta e conta pra gente. :-)