Flexbox e Grid Layout CSS3

Se você já leu algo a respeito de pelo menos uma dessas novas especificações, talvez ficou com a dúvida. Qual irei usar em meu código?

Ainda, se você foi um pouco mais a fundo, descobriu qual a diferença entre os dois. Nesse artigo, iremos ver o que são cada um deles, suas diferenças, quando e porque utilizar cada um, na sua aplicação.

Flexbox

O que é, qual o objetivo?

O conceito de “Caixas flexíveis” é de escrever layouts responsivos de forma melhor, com mais dinamismo no código, para facilitar alterações e adaptar elementos conforme tamanhos de tela (sendo este último o maior alvo do Flexbox).

Para começarmos com Flexbox, é necessários saber que existem na verdade duas especificações dela, a antiga (sintaxe de 2009) e a nova (sintaxe de 2011).

A sintaxe de 2011 é a que deve ser utilizada, sendo a mais atual e melhor desenvolvida.

Como aplicar no código Front-end?

O objetivo deste artigo não é mostrar a utilização na prática, mas irei passar alguns links úteis para o aprendizado, senão qual seria a graça, não é?

Links úteis

Guia completo: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Mais um guia: https://developer.mozilla.org/pt-BR/docs/CSS/Usando_caixas_flexiveis_css

Guia simplificado: http://pt-br.learnlayout.com/flexbox.html

Posso começar a usar?

Sim! ou quase :/

Depois de sabermos o que é, iremos precisar saber qual é o suporte dos navegadores atuais, para ver se podemos utilizar.

Navegadores utilizados atualmente que não suportam a especificação (com a nova sintaxe):

IE 8 — 9 (além da versão 10, que suporta parcialmente)

Android Browser 4.1 — 4.3

O navegador número 1 para baixar um navegador web, de verdade

E aí, você vai ser limitado por 8,34% de utilizadores da web (conforme caniuse), que não se atualizam? Em muitos casos será preciso, mas é bom sempre considerar o Flexbox, assim como outras propriedades CSS e HTML novas.

Grid Layout

Mais uma vez: O que é, qual o objetivo?

Bom, o Grid Layout é uma especificação bastante recente e que por conta disso ainda não está pronta, e está sempre sendo atualizada.

Antigamente, todo o layout de um site era definido através de tabelas. Tudo era feito através do próprio HTML, ou seja, um site era uma tabela enorme. Isso era horrível, pois a semântica na estrutura HTML era praticamente inexistente. Os estilos eram feitos com a estrutura HTML.

Atualmente, eliminamos as tabelas (só usamos elas onde devem ser utilizadas). Fazemos os estilos no CSS, de forma organizada, limpa e semântica.

Mas como fazemos atualmente, no CSS, é um tanto complexo fazer alinhamentos bons. O que sempre acontece é que utilizamos um sistema de grid (de algum framework) para trabalharmos de forma mais limpa, fácil e organizada.

Com o Grid Layout, será possível fazer códigos mais flexíveis e organizados, e ainda de forma nativa no CSS.

Na prática

Links úteis

Guia completo: https://css-tricks.com/snippets/css/complete-guide-grid/

Guia de uso e algumas explicações: http://loopinfinito.com.br/2013/10/08/css-grid-isso-muda-tudo-de-novo/

Mas… posso começar a usar?

Não, ainda não podemos nos beneficiar do Grid Layout. Isso acontece porque sua especificação não está completa, e os navegadores ainda não implementaram ela.

Somente o Internet Explorer possui suporte! Opa… estranho, certo? Mas não, não foi erro de digitação.

Isso acontece pois provavelmente haverão mudanças na especificação. Vale lembrar que o Chrome e Opera implementaram também, mas apenas no modo de desenvolvedores.

Navegadores que suportam a especificação:

IE 10–11 (parcialmente)

Chrome (para desenvolvedores)

Opera (para desenvolvedores)

Fazendo um time com Flexbox e Grid Layout

Para podermos saber quando utilizar cada um desses, precisamos saber qual a diferença entre eles.

Você pode achar estranho: Mas porque duas especificações para alinhamento que são bastante semelhantes, no CSS3?

O que acontece é que não iremos escolher uma delas e começar a aplicação com isso. Na prática, poderemos unir as duas para ter um código melhor. Para fazer isso, iremos utilizar o Grid Layout para áreas externas. A estrutura geral de um site (cabeçalho, corpo, menu, rodapé), por exemplo.

Sendo assim, usamos o Flexbox para componentes (elementos que irão dentro de nossa estrutura geral do site)

Caso possua alguma dúvida sobre isso, pode comentar ou visitar este link. Lá, eu mesmo tirei algumas dúvidas sobre o assunto.

O que podemos levar disso tudo

Ambas as especificações são relativamente novas. O Grid Layout ainda está instável e sem suporte dos navegadores, por isso não podemos implementá-lo em nossas aplicações.

Já no caso do Flexbox, podemos considerar, mas alguns navegadores não possuem suporte (apenas os antigos, mas isso mudará com o tempo, não precisaremos mais dar suporte aos antigos).

Enquanto ainda não podemos desfrutar dessas especificações incríveis, o que nos resta é utilizar grids de frameworks (recomendado), criar nossos próprios ou ainda fazer sem Grid (não recomendado).

Agora finalizando: podemos aguardar a evolução das especificações ou, o que é melhor, ajudar a fazê-las evoluir.