CSS Grid Layout
@laryssamagalhaes
Front end developer, mineira, apaixonada por filmes e fã de
Harry Potter.
Hello!
O que é CSS Grid
Layout?
“Possibilita criar grids de linhas e
colunas apenas com CSS, sem
depender de elementos HTML.
Linhas vs Colunas
Coluna 1 Coluna 2 Coluna 3
Linha 1
Linha 2
Linha 3
Entendendo o
Grid Layout
Display: grid
Display: grid
Display: inline-grid
Com a propriedade inline-grid, os grids são dispostos
lado a lado.
grid-template-rows e grid-template-columns
grid-row e grid-column
Resultado
header
grid-row e grid-column
Resultado
menu
header
grid-row e grid-column
Resultado
header
menu content
grid-row e grid-column
Resultado
header
contentmenu
footer
grid-gap
Resultado
header
content
10px
footer
menu
10px
15px
Quais são as boas
práticas?
grid-area
Código antigo Código novo
grid-template-areas
Resultado
header
content
10px
footer
menu
10px
15px
OK, mas vamos para
os exemplos reais?
profile
photophoto
header
avatar
photo
photos
Código Instagram CSS
Código Instagram HTML
nav
header
news table
Código Globo Esporte
E no responsivo?
Responsivo Globo esporte
Código responsivo site Globo Esporte
Grid Layout FlexboxVS
Grid Layout
Podemos comparar o Grid
Layout à uma casa.
Flexbox
E o flexbox aos móveis de
uma casa.
Suporte dos
navegadores
https://caniuse.com/#feat=css-grid
Polyfill
https://github.com/FremyCompany/css-grid-polyfill
???
Quais são os 2
principais passos
para iniciar um grid
layout?
Qual o nome da
propriedade que
adiciona
espaçamentos entre
linhas e colunas?
Dado o código css:
grid-column: ¼
Quantas colunas a área
irá ocupar?
Qual a diferença
entre grid layout e
flexbox?
Perguntas?
@laryssamagalhaes - laryssamagal@gmail.com
Thanks!

CSS Grid Layout na prática