02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!

bySimoneAmorimonCodePen

Log In Sign Up

Adeus Flexbox, bem vindo

MAR 14, 2017

CSS Grid Layout!

Simone Amorim Follow | Simone Amorim's Posts

#O Futuro chegou
Finalmente o to aguardado dia chegou, essa semana ganhamos algo mais importante do que uma especi cao boa, ganhamos a implementao de uma especi cao
boa nos principais browsers <3.

At o momento usamos gambiarra para a criao de layouts com CSS, porque at ento no existia nada voltado especi camente para essa funo, legal temos exbox,
mas lek, relaxa ai e l at o nal :)

#Do antes ao agora ;)

Nos primordes usvamos tabela que foi uma forma de facilitar a criao de layout o que em contra partida retornava uma srie de problemas...

Em seguida iniciamos a utilizao do oat em lugar das tabelas, o que nos ajudou muito por ser mais exvel e usar menos cdigo HTML, mas o oat no foi feito pra
isso, s quem usou sabe como era triste e limitado.

Pra ajudar a alinhar e distribuir espao 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 espao disponvel e principalmente para acomodar todos os tipos de dispositivos de
exibio e tamanhos de tela. Mas o amado exbox no resolve todos os problemas e tambm no foi criado para resolve-los, principalmente quando o assunto so
interfaces complexas.

http://codepen.io/simoneas02/post/gridlayout 1/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

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

#O que CSS Grid Layout?

uma especi cao da W3C que disponibiliza um novo modelo de layout para o CSS com uma poderosa habilidade para controlar o tamanho e posio dos elementos
e seus contedos.

#Sim, mas devo usar Flexbox ou Grid Layout?

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

EDI T ON
HTML CSS Result

J Grid Layout a soluo certa quando voc deseja controlar o dimensionamento e o alinhamento em duas dimenses.

EDI T ON
HTML CSS Result

#Terminologia
http://codepen.io/simoneas02/post/gridlayout 2/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

Antes de iniciar a trabalhar com Grid Layout necessrio entender os termos que vem junto com a especi cao. Explicarei cada um deles para facilitar o
entendimento dos exemplos posteriores.

#Grid Lines
So as linhas que de nem o grid, elas podem ser distribudas de forma horizontal ou vertical. Futuramente poderemos nos referir a elas por um nmero ou por um
nome que pode ser de nido pelo desenvolvedor.

#Grid Tracks
o espao horizontal ou vertical entre duas Grid Lines.

http://codepen.io/simoneas02/post/gridlayout 3/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

#Grid Cell ou Grid Item

o espao entre quatro Grid Lines, sendo a menor unidade em nosso grid, conceitualmente podemos fazer uma analogia com uma clula de tabela.

http://codepen.io/simoneas02/post/gridlayout 4/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

#Grid Areas
qualquer espao no Grid usado para exibir um ou mais Gid Cells/ Items.

http://codepen.io/simoneas02/post/gridlayout 5/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

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

No exemplo abaixo .containerbox o Grid Container.

HTML

<divclass="containerbox">
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
</div>

http://codepen.io/simoneas02/post/gridlayout 6/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

#Grid items
So os itens que representam o contedo do grid, cada lho direto do grid container torna-se um grid item.

No exemplo abaixo cada elemento .box um grid item, porm o .sub-box no.
HTML

<divclass="containerbox">
<divclass="box"></div>
<divclass="box">
<divclass="subbox"></div>
</div>
<divclass="box"></div>
</div>

#Definindo um Grid
Para de nir um grid use os novos valores da propriedade display display:grid ou display:inlinegrid, assim que for de nido uma dessas propriedades no
.container-box todos os lhos direto desse elemento se tornaro itens do grid automagicamente.

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

CSS

.containerbox{
display:grid;
}

display:inlinegrid gera um Grid container com comportamento inline.

CSS

.containerbox{
display:inlinegrid;
}

#Line-base placement

http://codepen.io/simoneas02/post/gridlayout 7/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

Para de nir as colunas e linhas do grid use as propriedades gridtemplatecolumns e gridtemplaterows.

Cada valor atribudo a propriedade gridtemplatecolumns representa uma coluna que assumir o tamanho do valor que lhe for atribuido, assim como a
propriedade gridtemplaterows assumir o espessura do valor que lhe for atribudo.

Use as propriedades gridcolumngap e gridrowgap para especi car o espaamento entre as columns e as rows do grid.
CSS

.containerbox{
display:grid;
gridtemplatecolumns:50px100px150px200px;
gridtemplaterows:50px100px150px;
gridcolumngap:20px;
gridrowgap:20px;
}

http://codepen.io/simoneas02/post/gridlayout 8/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

Podemos usar o shorthand gridgap para passar os dois valores de uma s vez ;)
CSS

...
gridgap:20px;
...

http://codepen.io/simoneas02/post/gridlayout 9/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

#Line-base position
De ne onde est localizado um grid item no grid container, fazendo referncia a uma grid line espec ca.

Use gridcolumnstart e gridrowstart para especi car a grid line onde o item comea e gridcolumnend e gridrowend para especi car a grid line onde o
item termina.
CSS

.box{
gridcolumnstart:1;
gridrowstart:2;
gridcolumnend:4;
gridrowend:4;
}

http://codepen.io/simoneas02/post/gridlayout 10/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

Veja um exemplo de line-base-position

Podemos usar um shorthand para facilitar:

CSS

http://codepen.io/simoneas02/post/gridlayout 11/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

.box{
gridcolumn:1/4;/*gridcolumnstart/gridcolumnend*/
gridrow:2/4;/*gridrowstart/gridrowend*/
}

Ou ainda menor com o gridarea:

CSS

.box{
gridarea:1/2/4/4;/*gridcolumnstart/gridrowstart/gridcolumnend/gridrowend*/
}

#Area naming
No grid container podemos manipular a posio e comportamento dos grid itens, isso atravs da propriedade gridtemplateareas, onde podemos literalmente
montar todo o nosso layout em apenas uma propriedade. Para facilitar e atribuir mais semntica ao que estamos fazendo, atribuimos um nome a nossos grid itens
atravs da j conhecida gridarea.

http://codepen.io/simoneas02/post/gridlayout 12/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

EDI T ON
HTML CSS Result

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 contedo com vocs, 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?

http://codepen.io/simoneas02/post/gridlayout 13/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

#Quer saber mais?

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

#Concluso
Esse artigo foi apenas uma pincelada em algumas das features que eu lembrei de cabea aqui na hora, mas acreditem, a especi cao tem MUITO mais a oferecer.

#Comenta ahe ;)
Se quiserem saber mais sobre o assunto podem me seguir por ahee, se tiverem alguma dvida mandem comments ou gritem nas redes sociais.

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

12,751 16 48

Comments Lovers

1.

Afonso Pacifer @afonsopacifer on MARCH 14, 2017

Muit bom <3 Parabns pelo excelente artigo, co muito feliz em ver uma evangelista CSS to dedicada assim no Brasil :)

orgulho
http://codepen.io/simoneas02/post/gridlayout 14/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

orgulho

2.

Igor de souza morais @igordesouzamorais on MARCH 14, 2017

foda de mais

3.

http://codepen.io/simoneas02/post/gridlayout 15/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

Igor Oliveira @devigor on MARCH 15, 2017

Foda demais!!!! Essa especi cao veio para ajudar muito a comunidade CSS!!

4.

Marcelo Augusto Quintanilha de oliveira @mandelaloko on MARCH 15, 2017

Nossaaaaa que demais, parabns o/

http://codepen.io/simoneas02/post/gridlayout 16/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

5.

Armando Magalhes @armand1m on MARCH 15, 2017

Adorei sua explicao, mandou muito bem!

6.

Gabriel Carvalho @gcamara on MARCH 15, 2017

Show! Finalmente o GridLayout chegou ao CSS. Ainda que v levar um tempo pra ser bem utilizado, pelo menos o passo foi dado na direo certa. Parabns pelo
artigo!

http://codepen.io/simoneas02/post/gridlayout 17/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

7.

NURIELLY CAROLINE BRIZOLA @nurycaroline on MARCH 15, 2017

Que parada da hora!!.

8.

http://codepen.io/simoneas02/post/gridlayout 18/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

clovis neto @clovisneto on MARCH 15, 2017

Artigo show simone!! Orgulho dessa menina - \o/

9.

Andrews Ferreira Guedis @andrewsfg on MARCH 15, 2017

Parabns, muito bom o artigo. Ansioso para us-lo!

10.

http://codepen.io/simoneas02/post/gridlayout 19/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

luizstacio @luizstacio on MARCH 15, 2017

Parabns! Ficou muito foda o artigo.

11.

Roger Albino @rogeralbinoi on MARCH 15, 2017

Parabns pelo artigo! ;)

http://codepen.io/simoneas02/post/gridlayout 20/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

12.

Liliana Costa @21Liliana on MARCH 16, 2017

Muito bom, muito interessante!! Mas acho q vou conseguir intender melhor quando ver isso tudo aplicado em um projeto real

13.

Evandro Ribeiro @ribeiroevandro on MARCH 16, 2017

SURREAL Irado demais, obrigado por compartilhar com o cuidado em passar a informao de forma extremamente clara...

2
http://codepen.io/simoneas02/post/gridlayout 21/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

14.

Rodrigo de Araujo Lima @rodrigoaraujolima92 on MARCH 16, 2017

Artigo sensacional !

15.

Bruno Oliveira @brunoosilva on MARCH 17, 2017

Parabns pela matria! =)

http://codepen.io/simoneas02/post/gridlayout 22/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

16.

Leandro Severino @leandroseverino on APRIL 5, 2017

Parabns pelo EXCELENTE post. Com certeza est nos favoritos e guardado para consulta e referencia.

Visite tambm a nossas pgina no Facebook: - https://www.facebook.com/maxigenios

Visite tambm o nosso grupo no Facebook: - https://www.facebook.com/groups/maxigenios

E tambm o nosso blog: - http://pro ssionaldetecnologia.blogspot.com.br

Ob: Este material j est publicado l no grupo ;)

LEAVE A COMMENT MARKDOWN

http://codepen.io/simoneas02/post/gridlayout SUPPORTED. CLICK @USERNAMES TO ADD TO COMMENT. 23/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

LEAVE A COMMENT MARKDOWN SUPPORTED. CLICK @USERNAMES TO ADD TO COMMENT.

You must be logged in to comment.

CodePen Community

About Jobs

Blog Meetups

Podcast Teams

Advertising Patterns

Docs Code of Conduct

Support

Shop

Social Simone Amorim

Twitter Public Pens RSS

Facebook Popular Pens RSS

Flickr Posts RSS

http://codepen.io/simoneas02/post/gridlayout 24/25
02/05/2017 AdeusFlexbox,bemvindoCSSGridLayout!bySimoneAmorimonCodePen

Instagram

2017 CodePen

Demo or it didn't happen.

http://codepen.io/simoneas02/post/gridlayout 25/25