# Diquinhas marotas de CSS Grid (parte 2)

> Continue dominando CSS Grid com dicas avançadas - Parte 2. Mais técnicas profissionais, casos de uso reais e otimizações para layouts perfeitos. Domine Grid!

URL: https://dpw.dev/css/css-grid-dicas-parte-2/  
Publicado em: 2018-06-11  
Categoria: css  
Tags: css-grid, layout, web-design-responsivo  
Autor: Tárcio Zemel

Na [parte 1 sobre diquinhas marotas de CSS Grid](/css/css-grid-dicas-parte-1/), 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.

> Artigo baseado em [Another Collection of Interesting Facts About CSS Grid](https://css-tricks.com/another-collection-of-interesting-facts-about-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.

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

[Exemplo no CodePen](https://codepen.io/anon/pen/KoVdEO)

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:

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

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

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

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

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

```

[Exemplo no CodePen](https://codepen.io/anon/pen/RMrrvm)

## Feature Queries no Edge

Verificar o suporte para CSS Grid funciona muito bem com [Feature Queries](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/) 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:

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

[Exemplo no CodePen](https://codepen.io/anon/pen/wymzJv)

> **Atenção:** Caso você use, saiba que [detecção de navegador (browser detection) é ruim](https://css-tricks.com/browser-detection-is-bad/).

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

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

```

[Exemplo no CodePen](https://codepen.io/anon/pen/vWaRWZ)

## Conclusão das diquinhas marotas de CSS Grid

Juntando a [parte 1 das diquinhas marotas de CSS Grid](/css/css-grid-dicas-parte-1/) 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. :-)

> **Dica:** [Faça nosso curso completo de CSS Grid grátis!](https://www.youtube.com/watch?v=q_WV9exilhk&list=PLYgzkrmJnLwpeeGgdADYq3cE2yUwLLTOv)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml