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:
|
1 |
<‘grid-template’> | <‘grid-template-rows’> / [ auto-flow && dense? ] <‘grid-auto-columns’>? | [ auto-flow && dense? ] <‘grid-autwo-rows’>? / <‘grid-template-columns’> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
grid: "one one" 200px "two four" "three four" / 1fr 2fr; /* shorthand para: */ /* grid-template-areas: "one one" "two four" "three four"; grid-template-rows: 200px; grid-template-columns: 1fr 2fr; */ |
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:
|
1 2 |
grid-template-rows: 100px 300px; grid-template-columns: 3fr 1fr; |
|
1 |
grid: 100px 300px / 3fr 1fr; |
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.
|
1 2 3 4 5 6 7 |
grid: auto-flow / 200px 1fr; /* shorthand para: */ /* grid-auto-flow: row; grid-template-columns: 200px 1fr; */ |
Se estiver à direita da barra, a shorthand define grid-auto-flow para column e cria linhas explícitas.
|
1 2 3 4 5 6 7 |
grid: 100px 300px / auto-flow; /* shorthand para: */ /* grid-template-rows: 100px 300px; grid-auto-flow: column; */ |
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.
|
1 2 3 4 5 6 7 8 |
grid: 100px 300px / auto-flow 200px; /* shorthand para: */ /* grid-template-rows: 100px 300px; grid-auto-flow: column; grid-auto-columns: 200px; */ |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* Edge 16 e posterior */ @supports (display: -ms-grid) and (display: grid) { div { width: auto; } } /* Edge 15 e anterior */ @supports (display: -ms-grid) and (not (display: grid)) { div { margin: 0 } } |
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.
|
1 2 3 4 5 |
ul { display: grid; grid-template-rows: repeat(4, auto) grid-auto-flow: column; } |
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. :-)