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
Docker - Containers, Imagens, Volumes e Networks
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
Laravel - Service Container, Service Provider e Facades
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.
