Diquinhas marotas de CSS Grid (parte 2)

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:

<`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.

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.

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:

grid-template-rows: 100px 300px;
grid-template-columns: 3fr 1fr;

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.

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.

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.

grid: 100px 300px / auto-flow 200px;

/* shorthand para: */
/*
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
*/

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:

/* 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:

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.

ul {
  display: grid;
  grid-template-rows: repeat(4, auto)
  grid-auto-flow: column;
}

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. :-)