Diquinhas marotas de CSS Grid (parte 1)

Conheça dicas e macetes (muitas vezes) não tão óbvios sobre CSS Grid e aprimore suas habilidades no melhor que o front-end tem a oferecer para layouts.

Ir para o artigo

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, é interessante ficar ciente de algumas diquinhas marotas para abrir o horizonte de possibilidades de uso de CSS Grid.

Vamos lá!

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.

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

.grid-item {

grid-column: 1 / -2;

}

See the Pen Grid item from first to second to last by Manuel Matuzovic (@matuzo) on CodePen.

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

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

.item {

grid-column-start: -3;

grid-row: -2;

}

See the Pen Negative values in grid-column/row-start by Manuel Matuzovic (@matuzo) on CodePen.

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:

See the Pen Experiment: Pseudo elements as grid items by Manuel Matuzovic (@matuzo) on CodePen.

Propriedades de CSS Grid podem ser animadas

De acordo com a especificação CSS Grid Layout Module Level 1, há 5 propriedades de CSS Grid que podem ser animadas:

grid-gap
grid-row-gap
grid-column-gap
grid-template-columns
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.

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

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

See the Pen CSS Grid Layout: span keyword by Manuel Matuzovic (@matuzo) on CodePen.

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.

.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;
}

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