O documento explora a evolução do CSS layout, destacando a transição de tabelas para novos modelos de layout, como box model, grid e flexbox. Apresenta os problemas históricos enfrentados com tabelas e como os novos métodos oferecem soluções mais semânticas e eficientes para o design responsivo. Também discute as especificações atuais e fornece exemplos práticos de implementação de grids e flexbox.

1. CSS {GRID} LAYOUT
It’s Evolution Baby

3. Quem?
•Front-end @ Chaordic
•Org. Front in Floripa
•Fundador do FloripaJS
•OSS & Community Lover
•Fã do Pearl Jam m/
diogomoretti
diogomoretti_

4. Afinal, o que é CSS Layout?
CSS Layout é o uso de CSS (!) para se
estruturar uma página web. O termo
apareceu com o CSS 1.0 e 2.1 para substituir
as famosas tabelas na criação de layouts.
Hoje é muito usado pelo W3C para nomear
novas especificações.

5. Não vamos
falar de

6. Roadmap
Table
Box Model/Tableless/Grids
Flexbox
Grid Layout

7. TABLE

8. História das tabelas
•Surgiu em 1995 com o HTML 3.0
•Ganhou força (ou seja, mais atributos)
juntamente com o HTML 3.2
•Ao contrário do que todo mundo pensa, as
tabelas nasceram para tabular dados e
TAMBÉM PARA CRIAR LAYOUTS!
https://www.w3.org/TR/REC-html32#table

9. Problemas das 'tables'
•Estilo e marcação misturados (cellpadding,
cellspacing, valign, colspan, rowspan…)
•Render não-incremental
•Acessibilidade
•Código de difícil manutenção e leitura
https://en.wikipedia.org/wiki/Incremental_rendering

10. BOX MODEL

11. História do Box Model
•Surgiu em 1996 com CSS 1.0
•Conceito do CSS (estilo | marcação)
•Aparição de elementos de bloco (<div>, <h1>,
<p>)
•Propriedades como margin, padding, width,
height, display, float, border, background…

12. Box Model – CSS 2.1
•Foco na estruturação de layouts
•Propriedades surgiram como position, max-* e
min-*
•Valores com top, left, bottom, right
•Usamos até hoje ¯_(ツ)_/¯

13. Tableless
•Movimento ~2002
•Proposta de deixar TABLE para tabular dados e
BOX MODEL para a criação de layouts
•Sites surgiram para apoiar a causa: CSS Zen
Garden, Tableless, Maujor…
•Gostamos até hoje ¯_(ツ)_/¯

14. Box Model CSS 3
•Box Sizing
content
padding
border
margin

15. Box Model CSS 3
•Box Sizing
content
padding
border
margin
box-sizing: border-box;

16. http://reference.sitepoint.com/css/ie5boxmodel

17. Problemas do Box Model
•Alinhar objetos verticalmente
•Posicionar divs lado-a-lado
•Se for usar float, tem que usar clearfixes
•Uma div acompanhando a altura da outra
•…e muito mais (muito mesmo)
•Ahh, problemas que temos até hoje ¯_(ツ)_/¯

18. Parece evoluir…

19. …mas a gente não
conseguia fazer isso direito:
<div> <div> <div>

20. …até hoje!

21. Divs lado-a-lado CAR%#$

22. GRID SYSTEM

23. Grids
•Nasceu para resolver problemas ao criar um
sistema de colunas
•Começou em 2007 com o Blueprint mas seu
"boom" foi em 2009 com o 960.gs
•É uma abstração do Box Model, porque por trás
é CSS 2.1 cheio de gambiarra para funcionar

24. Grids
•Isso agora é possível como MÁGICA!
1 2 3
<div class=“container">
<div class=“span-4”>1</div>
<div class=“span-4”>2</div>
<div class=“span-4”>3</div>
</div>

25. Aí em 2011…

26. Isso fazia sentido de 2007~2011
com CSS puro! Mas ai…

27. <div class="col-md-5 col-sm-5 col-xs-12">
<div class="col-md-7 col-sm-7 col-xs-7">
Isso em 2017 é inadmissível

28. "Grids não-semânticos
só fazem sentido com
CSS Puro"
Moretti, Diogo – 2013

29. Grids Semânticos
•Se você usa pré-processador, use grid semântico
•Bootstrap e Foundation já possuem versões de
seus grids de forma semântica (Ex.: SASS)
•Melhora a leitura e sua página não é desenhada
pelo html, e sim pelo CSS
•Afinal, não é isso que buscamos? Semântica e
um código manutenível

31. CSS LAYOUT SPECS
CSS Grid Layout Module Level 1
Especificação Atual Status
CSS Flexible Box Layout Module Level 1 2016
Candidato a
recomendação
CSS Grid Layout Module Level 1 2017
Candidato a
recomendação
CSS Template Layout Module 2015 Rascunho
CSS Multi-Column Layout Module 2011
Candidato a
recomendação

32. FLEXBOX

33. Afinal, o que é Flexbox?
A principal ideia é dar ao “container" (pai) a
habilidade de mudar o tamanho e direção
dos filhos, afim de preencher os espaços e
evitar o overflow.
https://www.w3.org/TR/css-flexbox-1/

34. Features do Flexbox
•Resolve quase todos os problemas do Box
Model tradicional
•Criado para layout e pequenas partes da APP
•Não possui float, overflow…
•Força o uso semântico de HTML e CSS
•Ótimo suporte (IE10+) – 98%
https://www.w3.org/TR/css-flexbox-1/

35. Estrutura para os exemplos
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
flex container
flex items

36. Sem Flexbox
1
2
3

37. Com Flexbox
.container {
display: flex;
}
1 2 3

38. Centralizar com Flexbox
.item {
margin: auto;
}
.container {
display: flex;
}

39. CSS GRID LAYOUT

40. CSS Grid Layout?
A ideia é dividir sua página em linhas e
colunas e permitir posicionar elementos
nesses “slots" criados. Também é possível
trocar a posição dos elementos usando
apenas CSS.
https://www.w3.org/TR/css-grid-1/

41. Em outras palavras…

42. Você vai “fatiar" sua
página e depois encaixar
os “macro" blocos

43. Suporte
10+ 52+ 57+ 10.1+ 44+
http://caniuse.com/#feat=css-grid
iOS Safari / Android Chrome e FF

44. Terminologia
<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class=“sidebar"></div>
<div class="footer"></div>
</div>
Grid container
Grid items

45. DISCLAIMER

46. Sintaxe
.container {
display: grid;
}

47. Exemplo 1
.container {
display: grid;
grid-template-columns: 1fr 300px;
grid-template-rows: 200px 500px 200px;
}
WTF!???

48. Lines & Sizes
200px
1fr
200px
300px
500px
Line 1 Line 2 Line 3
Line 1
Line 2
Line 3
Line 4

49. .header {
background: red;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
Grid Column & Grid Row

50. .header {
background: red;
grid-column: 1 / 3;
grid-row: 1 / 2;
}
Grid Column & Grid Row

51. .header
Exemplo 1: Header

52. .sidebar {
background: yellow;
grid-column: 2 / 3;
grid-row: 2 / 4;
}
Exemplo 1: Sidebar

53. .header
Exemplo 1: Sidebar
.sidebar

54. Exemplo 1: Final

55. Ahh, mas fica tudo muito
preso nessa estrutura…

56. .container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100vh;
grid-gap: 10px;
}
Exemplo 2
Espaçamento entre linhas e colunas.

57. Exemplo 2
NÃO FAÇA ISSO

58. Ahh, então me dá um
exemplo prático

59. https://dribbble.com/shots/1573896-Warehouse

61. header menu
tea tea-feat
rooms
shake-feat shake

62. <div class="container">
<div class="header"></div>
<div class="menu"></div>
<div class="tea"></div>
<div class="tea-feat"></div>
<div class="rooms"></div>
<div class="shake-feat"></div>
<div class="shake"></div>
</div>
Grid Area

63. Putz, agora vou ter que
decorar onde começa e
termina cada bloco…

64. .container {
display: grid;
grid-template-columns: 350px 1fr 350px;
grid-template-rows: 600px 200px 200px 200px;
grid-template-areas:
"header header menu"
"tea tea-feat tea-feat"
"rooms rooms rooms"
"shake shake-feat shake-feat”
}
Grid Area

65. .header {
grid-area: header;
background: red;
}
Grid Area

66. Grid Area
.header

68. Tá, e o responsivo como é
que fica?

69. .container {
display: grid;
grid-template-columns: 1fr 300px;
grid-template-rows: 200px 1fr 200px;
grid-template-areas:
“header header"
"content sidebar"
"footer footer"
}
Responsive

70. Responsive

71. .container {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto auto;
grid-template-areas:
“header"
“content"
"sidebar"
"footer"
}
Responsive
@media (max-width: 580px) {
}

72. Responsive

73. Mais um exemplo…

75. O que não vimos
•Alinhamento do container (justify-items, align-
items, justify-content, align-content…) e também
dos “items" (justify-self, align-self…)
•Subgrid e inline-grid
•Propriedades novas como grid-auto-*
•Valores novos como span, auto-fill, minmax()…
•E outras aplicações…

76. Resources
http://jensimmons.com/post/feb-27-2017/learn-css-grid
http://gridbyexample.com
https://css-tricks.com/snippets/css/complete-guide-grid
http://cssgridgarden.com
https://github.com/simoneas02/awesome-grid-layout
http://www.griddy.io

77. Quem Seguir?
@jensimmons
@Una
@rachelandrew
@chriscoyier
@meyerweb

78. Por um mundo com
mais desenvolvedores…
…que não quebrem
a web!

79. THANKS!
diogo.nu