Adeus Flexbox, bem vindo CSS Grid Layout!
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 ou em uma coluna.
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?
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.
XOXO