Aprenda grid layout - Parte 7 - Rearranjo e posicionamento

15/01/2018 - 4 min de leitura

GRID LAYOUT

Estamos na nossa sétima parte dessa série maravilhosa e eu, sinceramente, pensava que iria ser bem menos posts até chegar a parte de construção de layouts.

Mas precisamos entender tudo (ou quase tudo) que podemos fazer com as nossas grids.

Se é a sua primeira vez aqui, seja bem-vindo(a)! Veja a sequência completa da série.

E para você que já é de casa, bem-vindo(a) também. Vamos nessa!

Código do post tá aqui.

Esse post irá conter uma das coisas que eu acho mais legais em grid layout: Rearranjo (reagrupamento).

Mas antes de falar disso, vou te mostrar algumas propriedades novas, para mudar o posicionamento e tamanho de grids.

Grid-column e grid-row

Essa propriedade manipula o tamanho e posicionamento da grid.

Seus valores são inteiros. E quando colocados 2 valores, deverão ser separados por uma /

Ex.:

.grid-item:nth-child(5){
  grid-column: 4;
  grid-row: 4 / 6;
}

Estou dizendo que o quinto elemento (ou quinto filho) da classe grid-item terá início na coluna 4 e irá ter um tamanho (row) que começa na linha 4 e vai até o começo da linha 6.

Perceba que não é obrigatório usar os dois valores. Mas caso eu quisesse que essa coluna número 5 fosse mais larga, eu poderia dizer 4 / 8. No caso. ela iria ocupar 4 colunas e 2 linhas no tamanho.

Faça o teste para comprovar que da para realocar essa grid no layout: Mude os valores para 1 e 1 / 3. E veja que ela ficou com o mesmo formato, porém em um lugar diferente. Nesse caso, logo no início da grid.

IMPORTANTE: Essa propriedade é muito legal, mas pode ser perigosa. Use-a com moderação. Aconselho tomar cuidado porque ela pode quebrar toda a sua lógica de layout. Isso ocorre porque os elementos que estão com essa propriedade são colocados primeiro que os outros. Seu navegador assume que esses elementos têm mais prioridade.

Essa técnica pode ser boa, como também prejudicial. É uma faca de dois gumes.

grid-column-end e grid-row-end

Essa propriedade é "menos prejudicial" que a de cima.

Ela pode possuir dois tipos de valores: só inteiro ou o modo + inteiro.

Veja o exemplo:

.grid-item:nth-child(5){
  grid-column-end: span 2;
  grid-row-end: span 2;
}

O modo usado para a exbição é o span. Portanto, essa grid será jogada logo em seguida da anterior (como a ideia de elemento span mesmo), ou seja, não vamos mudar o posicionamento dela. Já o número inteiro diz quantas colunas ou linhas ela vai ocupar.

Então, esse grid não terá alteração no seu posicionamento, mas sim no seu tamanho e largura. Terá uma largura de 2 colunas e mais 2 linhas de altura.

IMPORTANTE: span é só uma das opções. Temos outras, se você quiser saber mais, tem esse link da Mozilla.

Rearranjo / Reagrupamento das grids

As vezes temos que usar as propriedades que mostrei a cima e acaba que o nosso layout fica todo bagunçado e quebrado.

Veja um exemplo que criei: 24 grids de 8 cores diferentes. Toda responsiva (veja como criar grids responsivas), mas usei alguns grid-column-end e grid-row-end e pei! O layout ficou todo quebrado

Código que tem grid-column-end e grid-row-end:

.color-2{
  background-color: #8A33FA;
  grid-column-end: span 2;
  grid-row-end: span 2;
}
.color-3{
  background-color: #BD43C0;
  grid-column-end: span 3;
  grid-row-end: span 3;
}
.color-4{
  background-color: #DD375B;
  grid-row-end: span 4;
}

E o resultado:

Layout quebrado

O layout ficou todo quebrado e cheio de espaços.

Isso ocorre porque o navegador vai colocando as grids pela ordem normal, quando ele vê que o espaço que falta não cabe a próxima grid, ele pula pra linha seguinte e encaixa ela. Fazendo assim, ficar com esses espaços brancos.

Agora veja que esses espaços brancos poderiam ser reutilizados. Pois coincidentemente, eles tem os mesmos tamanhos que as grids que não possuem tamanhos diferenciados, como por exemplo, a número 13.

grid-auto-flow

Essa propriedade é uma lindeza. Com ela podemos reagrupar algumas divs nesses espaços brancos.

Definimos ela na div que colocamos o display: grid.

Veja o exemplo:

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  grid-gap: 5px;
  grid-auto-rows: minmax(20px, auto);
  grid-auto-flow: dense;
}

grid-auto-flow: dense... É com essa pequena linha que todos os nossos problemas acabam.

Coloque-a e veja a mágica:

Layout organizado sem espaços brancos

O nosso layout ficou totalmente organizado, sem espaços em brancos.

O que aconteceu, é que o navegador ao invés de deixar o espaço em branco, ele procurou alguém que coubesse nesse espaço. Caso ele encontrar, ele reagrupa esse elemento na tela.

Esse é uma propriedade bem legal, mas não é em todo o layout que ela se adequa.

Ex.: Se você tivesse um layout de imagens que deveriam ser colocadas na ordem. Veja que está fora de ordem os elementos.

Porém, exitem layouts que essa propriedade cai como uma luva. Tudo depende do caso.

OBS: Existem vários outros valores ao invés de dense. Se quiser se aprofundar, veja os outros valores na MDN Mozilla.

Legal ver que você leu até o fim.

Até a próxima.

Compartilhe

Twitter