CSS

12 mai, 2017

Adeus Flexbox! Bem-vindo CSS Grid Layout!

Publicidade

O futuro chegou!

Finalmente 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 gambiarras 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 relaxa aí e lê até o final…

Do antes ao agora

Nos primórdios, usávamos uma 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 no 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 o 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 resolvê-los, principalmente quando o assunto são interfaces complexas.

Hoje, oficialmente estamos no futuro e temos suportado nos browsers uma opção realmente disruptiva 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.

See the Pen Flexbox Example by Simone Amorim (@simoneas02) on CodePen.

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

See the Pen Grid Layout Example by Simone Amorim (@simoneas02) on CodePen.

Terminologia

Antes de iniciar o trabalho 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, que 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 diretos desse elemento se tornarão itens do grid automaticamente.

O 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 atribuído, 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, atribuímos um nome aos nossos grid itens através da já conhecida grid-area.

See the Pen Grid Area Example by Simone Amorim (@simoneas02) on CodePen.

É isso mesmo que você viu. Relaxe 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í há bastante tempo, mas recentemente o Firefox e o Chrome anunciaram o suporte para essa maravilha.

Veja por você mesmo no Can I Use.

Quer saber mais?

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.

Comente!

Se quiserem saber mais sobre o assunto, podem me seguir por aí. Se tiverem alguma dúvida, mandem comentários ou gritem nas redes sociais: