CSS CSS Grid – Um Guia Interativo (Parte 2 – Itens)

Aprenda definitivamente a trabalhar com os Itens do CSS Grid com este Guia Interativo para facilitar o seu trabalho na construção de layouts com CSS.

Akira Hanashiro 11 de abril de 2019

Olá Web Developers!

No post anterior vimos as propriedades que usamos no container ao trabalhar com CSS Grid. Agora veremos as propriedades que utilizamos nos itens do container.

Itens

Lembre-se que temos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens da grid (elementos filhos).

Neste post veremos as propriedades que ficam nos elementos da grid.
Teremos basicamente um container com alguns itens dentro.

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

Para vermos a diferença das propriedades aplicadas em um item específico, vamos adicionar a este item a classe .selected.

<div class="container" >
    <div class="item" ></div>
    <div class="item selected" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
</div>

grid-area

Esta propriedade nós já vimos no post anterior. Ao declarar nomes para as áreas da nossa grid, utilizamos o grid-area para indicar a área onde um item irá se posicionar.

grid-column-start, grid-column-end, grid-row-start e grid-row-end

Indicar nomes para cada área da nossa grid e depois posicionar os itens usando o nome é bem simples. Porém, pode ser que você precise de algo mais flexível do que isso.
Com as propriedades grid-column-start, grid-column-end, grid-row-start e grid-row-end nós podemos indicar em que linha e coluna um item deve iniciar e acabar. Podemos usar tanto número quanto nomes.

grid-column e grid-row

Essas duas propriedades são atalhos para as 4 propriedades anteriores.
Em grid-column nós indicamos o início / fim da coluna, e em grid-row nós indicamos o início e fim da linha. Os valores são separados por /.

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

Tudo em uma propriedade: grid-area

Podemos também indicar essas 4 posições dentro de apenas uma única propriedade. Para isso também usamos o grid-area. A ordem é inicio-linha / inicio-coluna / fim-linha / fim-coluna

justify-self

Alinha o item da grid horizontalmente dentro de sua própria célula (área).

  • stretch (padrão): estica o item horizontalmente para ele preencher sua célula
  • start: alinha o item no início de sua célula
  • end: alinha o item no fim de suas células
  • center: alinha o item no centro de suas células

align-self

Alinha o item da grid verticalmente dentro de sua própria célula (área).

  • stretch (padrão): estica o item verticalmente para ele preencher sua célula
  • start: alinha o item na parte de cima de sua célula
  • end: alinha o item na parte de baixo de sua célula
  • center: alinha o item no centro de sua célula

place-self

Atalho para align-self e justify-self em uma única declaração.

Deixe seu comentário

Conheça o autor desse artigo

  • Foto Autor Akira Hanashiro
    Akira Hanashiro

    Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos.

    Posts desse Autor

Artigos relacionados