Iniciando com CSS Grid Layout

Há um tempo venho experimentando estruturar sites com Flexbox e Grid Layout para entender bem suas propriedades e em um futuro (que agora esta bem próximo) começar a implementar definitivamente nos meus projetos.

O Flexbox nos ajuda a gerenciar e controlar os seus itens(filhos) de forma conjunta declarando algumas propriedades no “wrap”.

[flex-direction: row / column]
Escolhemos se os itens serão organizados na horizontal ou vertical.
[flex-direction: row-reverse / column-reverse]
Modificamos o sentido desses itens (da esquerda para direita ou de baixo pra cima)
[flex-wrap: nowrap / wrap / wrap-reverse;]
Aqui controlamos se os itens ocupam uma única linha ou forçamos a criação de uma nova

Para distribuir os itens no wrap…

[justify-content: flex-start / flex-end / center / space-between / space-around]
Distribuímos os itens no wrap na horizontal
[align-content: flex-start / flex-end / center / space-between / space-around / stretch]
Distribuímos os itens no wrap na horizontal
[align-items: flex-start / flex-end / center / baseline / stretch]
para o alinhamento dos itens sobre si mesmos

Também é possível selecionar cada item de forma individual

[order]
Ordena os itens
[flex-grow]
Gerencia como distribuir os itens no espaço restante em cada linha do wrap
[align-self: auto / flex-start / flex-end / center / baseline / stretch]
Alterar o alinhamento “align-content” de um item específico

Tem mais alguns detalhes que não citei mas nos links abaixo você terá uma visão detalhada sobre o Flexbox caso ainda não conheça.

A guide to Flexbox by Css-tricks

Flexbox Froggy

Atualmente o Flexbox é suportado por todos os browsers (IE +10) então, vamos esquecer os floats e usar Flexbox em tudo. YEEEEAAAHHH !

E o CSS Grid Layout ?

Eu sei que o Grid Layout é uma especificação do CSS4… que esta em uma folha de rascunho da W3C… bla… bla… bla. Mas com notícia da Microsoft finalizando o suporte das versões antigas do IE as possibilidades de começar a trabalhar com ele aumentaram.

Antes de começar de fato, para poder renderizar corretamente as propriedades do CSS Layout Grid, vamos ter que baixar o IE de acordo ao Can I Use, somente os IEs tem surpote 😳, isso porque a especificação foi feita pela Microsoft. Eu utilizo o Firefox Developer Edition e consegui rendererizar razoavelmente bem, um pequeno bug que aparece mais é tranquilo. E para os chromeiros… com versão Canary podem digitar isto na url chrome://flags e habilitar esta opção

Gírias do CSS Grid Layout

Grid container
É o elemento de contêiner em que a malha ou grade é estabelecida.
Grid Items
Os elementos filhos da grade.
Grid lines 
São os separadores horizontais e verticais, usados para criar “grid tracks”, “grid cells” y “grid areas”. Por padrão e para identificar os grid lines tem um índice numérico e opcionalmente pode ser dado nomes específicos.
Grid track
O espaço entre duas linhas paralelas. As linhas são úteis para indicar onde o conteúdo começa e termina e onde as faixas estão hospedadas.
Grid cell
O espaço definido por duas linhas horizontais e duas verticais.
Grid area
É uma forma rectangular, que cobre um número arbitrário de células adjacentes. As áreas assim como as linhas também podem receber nome.

Criando com CSS Grid Layout

Antes de tudo vamos criar nosso html.

Obs. Não importa a ordem em que criamos nosso HTML, podemos declarar primeiro o footer e por ultimo o header que no css através das propriedades do CSS Grid Layout podemos reorganizar na posição desejada. É obvio e recomendado escrever o código HTML na ordem semântica.

Para começar no CSS vamos primeiro estilizar os elementos

.header { background-color: #0D47A1; padding: 1.2em;}
.footer { background-color: #2196F3; padding: 1.2em;}
.sidebar { background-color: #ccc; padding: 1.2em;}
.main { background-color: #fff; padding: 1.2em;}

Agora que esta tudo organizado, vamos criar nosso grid container de 2 colunas e 3 filas.

/*
*
* Definimos nosso wrap para receber o grid;
*/
display: grid;
/* 
*
* Será criado um grid de 2x3
* 2 colunas: 1º de 200px e a 2º ocupando o restante do espaço
*/
grid-template-columns: 200px 1fr;
/* 
*
* 3 filas altura automatica
*/
grid-template-rows: auto auto auto;

Nosso Header e Footer vão ocupar 100% da tela para isso declaramos o seguinte:

.header,
.footer {
grid-column-start: 1;
grid-column-end: 3;
}

Agora precisamos indicar que o Header vai ficar na primeira fila e o Footer na ultima (3º)

.header {
grid-row: 1;
}
.footer {
grid-row: 3;
}

Header e Footer organizados vamos agora para nossa sidebar, iremos dizer que vai estar na primeira coluna e na segunda fila

.sidebar {
grid-column: 1;
grid-row: 2;
}

E por ultimo indicamos que nosso main vai estar ao lado da sidebar, assim:

.main {
grid-column: 2;
grid-row: 2;
}

O resultado é este aqui

Você também pode fazer o download do código

Para mim entender o CSS Grid layout é mais fácil do que Flexbox, infelizmente como qualquer especificação temos que esperar o suporte dos browsers.
 Pesquisando na internet alguma lib ou polyfill mais não encontrei nada. Se alguém souber me avisa!

Fontes:
 https://escss.blogspot.com/2015/12/guia-css-grid-layout.html
 https://carlosazaustre.es/blog/css-grid-layout-css/


Originally published at www.michaelsantillan.com on January 22, 2016.