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 React Native - Animações e Estilização
Conhecer o cursoPara 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 Spring Framework - Spring Data JPA
Conhecer o cursoTudo 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.