# Diquinhas marotas de CSS Grid (parte 1)

> Domine CSS Grid com dicas essenciais - Parte 1 da série. Aprenda técnicas avançadas, truques profissionais e melhores práticas para layouts modernos. Comece!

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

Argumentos a favor de **CSS Grid** já não são mais necessários; a comunidade de webdevs já sabe que **CSS Grid Layout** é a tecnologia front-end do futuro do presente e chegou para ficar.

Mesmo depois de já conhecer [os fundamentos de CSS Grid](https://www.youtube.com/watch?v=q_WV9exilhk&list=PLYgzkrmJnLwpeeGgdADYq3cE2yUwLLTOv&index=1&t=1s), é interessante ficar ciente de algumas diquinhas marotas para abrir o horizonte de possibilidades de uso de CSS Grid.

Vamos lá!

> Artigo baseado em [A Collection of Interesting Facts about CSS Grid Layout](https://css-tricks.com/collection-interesting-facts-css-grid-layout/).

## Valores menores que -1 podem ser usados para grid-row-end e grid-column-end

Em muitos exemplos e tutoriais sobre CSS Grid, é possível conhecer a possibilidade de usar `grid-column-start: 1` e `grid-column-end: -1` (ou a shorthand `1 / -1`) para abranger (_span_) um elemento do primeira até a última linha.

Por exemplo, é possível definir `grid-column: 1 / -2` para abranger as células entre a primeira e a segunda até a última linha.

```scss
.grid-item {
  grid-column: 1 / -2;
}

```

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

## É possível usar valores negativos para grid-column/row-start

Outra coisa interessante sobre valores negativos é que também é possível usá-los em `grid-column/row-start`. A diferença entre valores positivos e negativos é que, com valores negativos, a colocação (_placement_) virá do lado oposto. Se se definir `grid-column-start: -2` o item será colocado na segunda à última linha.

```scss
.item {
  grid-column-start: -3;
  grid-row: -2;
}

```

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

## Pseudo-elementos são tratados como grid items

Pode parecer óbvio que os pseudo-elementos gerados com CSS se tornam grid items se estiverem em um grid container, mas não para todos...

Eis uma demonstração rápida sobre isso -- em que é possível se ver que os elementos gerados se tornam itens de grid e flex se estiverem dentro de um container correspondente:

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

## Propriedades de CSS Grid podem ser animadas

De acordo com a [especificação CSS Grid Layout Module Level 1](https://www.w3.org/TR/css-grid-1/#propdef-grid-column-gap), há 5 propriedades de CSS Grid que podem ser animadas:

1. `grid-gap`
2. `grid-row-gap`
3. `grid-column-gap`
4. `grid-template-columns`
5. `grid-template-rows`

Atualmente, funcionam animações apenas de `grid-gap`, `grid-row-gap` e `grid-column-gap` (somente em Firefox e Firefox Mobile).

## O valor de grid-column/row-end pode ser menor que o valor inicial

O valor de `grid-column-end` e/ou `grid-row-end` pode ser menor que o respectivo equivalente de início.

```typescript
.item:first-child {
  grid-column-end: 2;
  grid-column-start: 4;
}

```

O item no código acima começará na 4ª linha e terminará na 2ª ou, em outras palavras, começará na 2ª linha e terminará na 4ª.

## Usando a palavra-chave "span" em grid-column/row-start e grid-column/row-end

Um item de grid, por padrão, abrange uma única célula. Se for preciso mudar isso, a palavra-chave `span` pode ser bastante conveniente. Por exemplo, configurar `grid-column-start: 1` e `grid-column-end: span 2` fará com que o item se estenda por 2 células, da 1ª à 3ª linha.

Também é válido usar a palavra-chave `span` com `grid-column-start`. Se se definir `grid-column-end: -1` e `grid-column-start: span 2`, o grid item será colocado na última linha e ocupará 2 células, da última para a 3ª da a última linha.

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

## grid-template-areas e linhas nomeadas implícitas

Se for preciso criar template areas em uma grid, obter-se-á automaticamente 4 linhas nomeadas implícitas, 2 nomeando `row-start` e `row-end` e 2 para `column-start` e `column-end`. Adicionando o sufixo `-start` ou `-end` ao nome da área, eles são aplicáveis como qualquer outra linha nomeada.

```scss
.grid {
  display: grid;
  grid-template-columns: 1fr 200px 200px;
  grid-template-areas:
    "header header header"
    "articles favorites posts"
}

.footer {
  grid-column-start: favorites-start;
  grid-column-end: posts-end;
}

```

## Conclusão

CSS Grid Layout é uma tecnologia recente e as possibilidades no front-end só estão se iniciando. Com o passar do tempo (e evolução da especificação), certamente todos seremos presenteados com novas capacidades e, como sempre acontece, dicas e macetes de uso serão descobertos pela comunidade. Aguardemos ansiosamente!

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