O Futuro Chegou!

Finalmente o tão aguardado dia chegou, essa semana ganhamos algo mais importante do que uma especificação boa, ganhamos a implementação de uma especificação boa nos principais browsers <3.

Até o momento usamos gambiarra para a criação de layouts com CSS, porque até então não existia nada voltado especificamente para essa função, legal temos flexbox, mas lek, relaxa ai e lê até o final :)

Do antes ao agora ;)

Nos primordes usávamos tabela que foi uma forma de facilitar a criação de layout o que em contra partida retornava uma série de problemas...

Em seguida iniciamos a utilização do float em lugar das tabelas, o que nos ajudou muito por ser mais flexível e usar menos código HTML, mas o float não foi feito pra isso, só quem usou sabe como era triste e limitado.

Pra ajudar a alinhar e distribuir espaço entre itens em um container, surgiu o CSS Flexbox Layout (Flexbox), onde a ideia principal é dar ao container a capacidade de alterar a largura / altura e ordem de seus itens para um melhor preenchimento do espaço disponível e principalmente para acomodar todos os tipos de dispositivos de exibição e tamanhos de tela. Mas o amado flexbox não resolve todos os problemas e também não foi criado para resolve-los, principalmente quando o assunto são interfaces complexas.

Hoje, oficialmente estamos no futuro e temos suportado nos browsers uma opção realmente disrruptiva no quesito "criar layouts" com CSS, lhes apresento o seu novo Deus.

O que é CSS Grid Layout?

É uma especificação da W3C que disponibiliza um novo modelo de layout para o CSS com uma poderosa habilidade para controlar o tamanho e posição dos elementos e seus conteúdos.

Sim, mas devo usar Flexbox ou Grid Layout?

Flexbox é para layouts unidimensionais - qualquer coisa que precisa ser disposta em uma linha reta.

Já Grid Layout é a solução certa quando você deseja controlar o dimensionamento e o alinhamento em duas dimensões.

Terminologia

Antes de iniciar a trabalhar com Grid Layout é necessário entender os termos que vem junto com a especificação. Explicarei cada um deles para facilitar o entendimento dos exemplos posteriores.

Grid Lines

São as linhas que definem o grid, elas podem ser distribuídas de forma horizontal ou vertical. Futuramente poderemos nos referir a elas por um número ou por um nome que pode ser definido pelo desenvolvedor.

Grid Tracks

É o espaço horizontal ou vertical entre duas Grid Lines.

Grid Cell ou Grid Item

É o espaço entre quatro Grid Lines, sendo a menor unidade em nosso grid, conceitualmente podemos fazer uma analogia com uma célula de tabela.

Grid Areas

É qualquer espaço no Grid usado para exibir um ou mais Gid Cells/ Items.

Grid Containers

É o pai direto de todos os itens do grid sendo o elemento que recebe a propriedade display: grid.

No exemplo abaixo .container-box é o Grid Container.

    <div class="container-box">    
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

Grid items

São os itens que representam o conteúdo do grid, cada filho direto do grid container torna-se um grid item.

No exemplo abaixo cada elemento .box é um grid item, porém o .sub-box não.

    <div class="container-box">
    <div class="box"></div>
    <div class="box">
      <div class="sub-box"></div>
    </div>
    <div class="box"></div>
  </div>

Definindo um Grid

Para definir um grid use os novos valores da propriedade display display: grid ou display: inline-grid, assim que for definido uma dessas propriedades no .container-box todos os filhos direto desse elemento se tornarão itens do grid automagicamente.

display: grid gera um Grid container com comportamento de bloco.

    .container-box {
    display: grid;
}

display: inline-grid gera um Grid container com comportamento inline.

    .container-box {
    display: inline-grid;
}

Line-base placement

Para definir as colunas e linhas do grid use as propriedades grid-template-columns e grid-template-rows.

Cada valor atribuído a propriedade grid-template-columns representa uma coluna que assumirá o tamanho do valor que lhe for atribuido, assim como a propriedade grid-template-rows assumirá o espessura do valor que lhe for atribuído.

Use as propriedades grid-column-gap e grid-row-gap para especificar o espaçamento entre as columns e as rows do grid.

    .container-box {
    display: grid;
    grid-template-columns: 50px 100px 150px 200px;
    grid-template-rows: 50px 100px 150px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

Podemos usar o shorthand grid-gap para passar os dois valores de uma só vez ;)

    ...
    grid-gap: 20px;  
  ...

Line-base position

Define onde está localizado um grid item no grid container, fazendo referência a uma grid line específica.

Use grid-column-start e grid-row-start para especificar a grid line onde o item começa e grid-column-end e grid-row-end para especificar a grid line onde o item termina.

    .box {
    grid-column-start: 1;
    grid-row-start: 2;
    grid-column-end: 4;
    grid-row-end: 4;
  }

Veja um exemplo de line-base-position

Podemos usar um shorthand para facilitar:

    .box {
    grid-column: 1/4; /* grid-column-start / grid-column-end */
    grid-row: 2/4; /* grid-row-start / grid-row-end */
  }

Ou ainda menor com o grid-area:

   .box {
    grid-area: 1 / 2 /4 / 4; /* grid-column-start / grid-row-start / grid-column-end / grid-row-end */
  }

Area naming

No grid container podemos manipular a posição e comportamento dos grid itens, isso através da propriedade grid-template-areas, onde podemos literalmente montar todo o nosso layout em apenas uma propriedade. Para facilitar e atribuir mais semântica ao que estamos fazendo, atribuimos um nome a nossos grid itens através da já conhecida grid-area.

É isso mesmo que você viu ai em cima mano, relaxa e tente viver com essa realidade.

Já roda em todos browsers?

Aqui entra a melhor parte e o motivo de eu estar compartilhando esse conteúdo com vocês, essa tecnologia já está por aí a bastante tempo mas recentemente o Firefox e Chrome anunciaram o suporte para essa maravilha.

Veja por você mesmo no Can i Use ;)

Quer saber mais?

• Collection com exemplos de Grid Layout
• Grid by Example
• A Complete Guide to Grids

Conclusão

Esse artigo foi apenas uma pincelada em algumas das features que eu lembrei de cabeça aqui na hora, mas acreditem, a especificação tem MUITO mais a oferecer.

Comenta ahe ;)

Se quiserem saber mais sobre o assunto podem me seguir por ahee, se tiverem alguma dúvida mandem comments ou gritem nas redes sociais.

• @samorim02 (Twitter)
• @simoneas02 (GitHub)
• Personal Page

XOXO