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

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.

Curso C# (C Sharp) - ASP.NET MVC

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

Curso React Native - Firebase Messaging

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