CSS Layout: O ontem, o hoje e o depois

Partindo do ontem com layouts em tabelas e passando pelo hoje com o box model, iremos explorar as limitações dessas abordagens para entender o que as novas técnicas do depois – flexbox, grids, regions e exclusions – vêm a solucionar.

1. css layout O ONTEM, O HOJE E O DEPOIS @LOOPINFINITO
2. @CAIO_GONDIM @ALMIRFILHO
3. GLOBO.COM
4. LOOPINFINITO.COM.BR
5. tabelas box model flexbox 1990 1995 1998 2012 ? regions exclusions & <pre> grid ?
6. flexbox 2034 2047 regions exclusions & grid 2012
7. tabelas O ONTEM
8. • 1990 html 1.0 • estrutura de documento • layout com <pre>
9. primeiro site ever
10. • 1993 html 2.0 • <img> • padrao IETF
11. • 1995 html 3.0 • <table> • nunca foi aprovado • text flow ao redor de <img> • elementos matematicos
12. • 1997 html 3.2 • <table border=’0’> •nasce o web designer
13. html 3.2 spec “HTML 3.2 includes a widely deployed subset of the specification given in RFC 1942 and can be used to markup tabular material or for layout purposes.” W3C HTML 3.2 specification – http://www.w3.org/TR/REC-html32
14. yahoo!
15. apple.com
16. bol.com.br
17. uol.com.br
18. cade.com.br
19. amazon.com
20. globo.com << 2000
21. globo.com << 2001
22. codigo <!-- ** M A I N T A B L E ** --> <A NAME="topofpage"> <TABLE WIDTH=598 BORDER=0 CELLPADDING=0 CELLSPACING=0> <!-- ROW 1 --> <TR VALIGN="TOP"> <!-- ** M A R G I N M E N U ** --> <TD WIDTH=128 ROWSPAN=3 VALIGN="TOP" BGCOLOR="#CCC"> <IMG SRC="/web/19961022105458im_/http://www4.apple.com elements/spacer2.gif" WIDTH=128 HEIGHT=1 ALT=""><BR> <!-- SERVER SIDE IMAGE MAP --> <A HREF="/web/19961022105458/http://www5.apple.com/cgi imagemap/mapserve.acgi$home/newsidebar.map"> <IMG SRC="/web/19961022105458im_/http://www4.apple.com elements/sidebar.gif" WIDTH=125 HEIGHT=262 BORDER=0 ALT="Navigation Graphic - See Below" ISMAP USEMAP="#newsidebar"></A>
23. OMG
24. OMFG whyyy?
25. • conteudo e estilo misturados problemas • render nao incremental • baixa acessibilidade
26. box model O HOJE
27. • 1996 (com o HTML 3.2) css 1 • separa estilo da marcacao • reuso de estilos • independente do conteudo (?)
28. css 1 • block-level elements • margin, padding e border • width e height • display e float
29. • 1998 - 2011! css 2.1 • position • top, bottom, left e right • min-height e max-height • min-width e max-width
30. • 1999 - HOJE css 3 • CSS basic user interface module level 3 • box-sizing: border-box
31. margin-top margin-bottom margin-left margin-right padding-top padding-bottom padding-left padding-right width x height border-top-width border-bottom-width border-left-width border-right-width top bottom left right
32. margin-top margin-bottom margin-left margin-right padding-top padding-bottom padding-left padding-right border-top-width border-bottom-width border-left-width border-right-width width x height top bottom left right bo x- siz i ng: bor der-box ;
33. 2002 TABLELESS
34. tabelas para DADOS TABULARES box model para LAYOUTS
35. TABLELESS.COM.BR
36. • alinhar verticalmente problemas Conteudo } ? .box { vertical-align: middle;
37. • alinhar verticalmente problemas Conteudo .box { vertical-align: middle; } display: table-cell;
38. • igualar altura de regioes problemas Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <aside> .box { height: 200px; } aside, .text { height: 100%; float: left; }
39. • igualar altura de regioes problemas Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <aside> .box { height: 200px; } aside, .text { height: 100%; float: left; } Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ofelquys lotomania ipsum tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
40. • igualar altura de regioes problemas Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <aside> .box { height: 200px; } aside, .text { height: 100%; float: left; } Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ofelquys lotomania ipsum tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
41. • igualar altura de regioes problemas Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <aside> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ofelquys lotomania ipsum tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .box { height: 200px; display: table-row; } aside, .right { height: 100%; float: left; display: table-cell; }
42. table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group display
44. verdade seja dita 2013 2013 E AINDA NAO SUPERAMOS AS TABELAS
45. flexbox O DEPOIS
46. • otimizado para UI layout • comportamento previsivel • agnostico de direcao flexbox
47. web site header content ads
48. ads content2 footer
49. web app footer header side main
50. os x app store
51. vantagens • agnostico a direcao • modificar ordem s/ estrutura • alinhamento left, right, center, top, bottom, whatever
52. versões • 2009: display:box; box-{*} • 2011: display:box; flex() • 2012: display:flex; flex-{*}
53. vocabulário flex-item flex-item main size cross size main axis cross axis flex-container
54. grow and shrink .a .a .b .container { display: flex; flex-direction: row; } .container 600px
55. flex-grow .a .a .b .a { flex-basis: 113px; flex-grow: 0; flex-shrink: 1; } .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; } .container 600px
56. .a .a .b .a { flex-basis: 113px; flex-grow: 0; flex-shrink: 1; } .container 800px .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; } flex-grow
57. flex-shrink .a .a .b .container 600px .a { flex-basis: 113px; flex-grow: 0; flex-shrink: 1; } .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; }
58. .a .b .container 500px .a .a { flex-basis: 113px; flex-grow: 0; flex-shrink: 1; } .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; } flex-shrink
59. cálculo do espaço .a .b .container 800px .c .a { flex: 1; } .b { flex: 2; } .c { flex: 1; } css .container { display: flex; }
60. A flex-direction: row; B C
61. A flex-direction: column; B C
62. justify-content: flex-start; A B C
63. justify-content: flex-end; A B C
64. justify-content: center; A B C
65. justify-content: space-between; A B C
66. justify-content: space-around; A B C
67. A B C flex: 1;
68. A B C flex: 2;
69. align-items: flex-start; A B C
70. align-items: flex-end; A B C
71. align-items: center; A B C
72. align-items: stretch; A B C
73. order: N; A B C
74. order: N; C B A
75. order: N; C B A
76. mix com media queries header main footer aside1 aside2
77. header main footer aside2 aside1 mix com media queries
78. centralizar elementos .a .container { display: flex; } .container .a { margin: auto; }
79. centralizar elementos .a .container .container { display: flex; } .a { margin: auto; }
80. web app flexible
81. web app flexible
82. regions O DEPOIS
83. html • separacao de conteudo e apresentacao • HTML como template • layouts de impressos
84. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed layout em colunas Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.
85. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. layouts complexos
86. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. layouts complexos
87. conceitos importantes •named flows •regions
88. html <div class=”content”> <p> ... </p> </div> <div class=”region region-1”></div> <img src=”” /> <div class=”region region-2”></div> <div class=”region region-3”></div> <div class=”region region-4”></div>
89. html <div class=”content”> <p> ... </p> </div> <div class=”region region-1”></div> <img src=”” /> <div class=”region region-2”></div> <div class=”region region-3”></div> <div class=”region region-4”></div>
90. css .content { flow-into: post-text; } .region { flow-from: post-text; }
91. css .content { flow-into: post-text; } .region { flow-from: post-text; }
92. ::region() .region-3::region(p) { color: #BADA55; } .region-4::region(p) { color: red; }
93. regions
94. regions
95. layouts complexos
96. exclusions O DEPOIS
97. a tirania do retângulo ELEMENTOS DE BLOCO SAO QUADRADOS
98. a tirania do retângulo border-radius?
99. a tirania do retângulo border-radius? • molda apenas estilo • nao molda conteudo
100. a tirania do retângulo Sed at ast molestie augue tad sitep amet leo consequat siuop posuere. Vestibulum ante ipsum tade primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum bdolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac amet euism Sed Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus temo eleifend ut et magna. Lorem ipsum dolor sito amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies actased tempor dui sagittis. In at sectum condimentum facilisis porta. Sed nec diam eu et magna. Lorem ipsum dolor sito amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies actased
101. shapes! shape-inside shape-outside
102. shape-inside .circulo { // shape-inside: circle(cx, cy, radius); shape-inside: circle(50%, 50%, 50%); } Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac amet euism Sed
103. shape-inside A Sed molestie augue sit amet leo consequat as due to a posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac am .estrela { shape-inside: polygon(0px 150px, ...); }
104. shapes com regions A Sed molestie augue sit amet leo consequat as due to a posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, soc at consectetur adipisg elit. Vivamus luctus urna sed urna ultricies ser am Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac amet euism Sed
105. shape-outside Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. nulla fringilla, orci ac amet euism sed orci ac amet euism <div class="circulo"></div> <p>Lorem ipsum dolor sit amet...</p>
106. shape-outside Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. nulla fringilla, orci ac amet euism sed orci ac amet euism .circulo { float: left; shape-outside: circle(50px, 50%, 50%); }
107. layouts complexos
108. layouts complexos
109. layouts complexos
112. grid O DEPOIS
113. • 2012 (W3C draft) css grid layout • divide o espaco em regioes
114. assim como tabelas... LINHAS E COLUNAS
115. diferente de tabelas... ESTRUTURALMENTE INDEPENDENTE
116. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non LOOP Lorem ipsum Dolor sit amet Consectetur adipisicing Sed do eiusmod bla bla footer
117. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non LOOP Lorem ipsum Dolor sit amet Consectetur adipisicing Sed do eiusmod bla bla footer flexivel fixo
118. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non LOOP Lorem ipsum Dolor sit amet Consectetur adipisicing Sed do eiusmod bla bla footer flexivel fixo
121. sem position ? esqueca! resize? esqueca!
122. mão na massa... DEFININDO UM GRID
123. html <div class="container"></div>
124. css display: grid;
125. css grid-template-columns: auto auto; 1 2 display: grid;
126. css grid-template-rows: auto auto auto; 1 2 3 4 5 6 grid-template-columns: auto auto; display: grid;
127. css 1 2 3 4 5 6 grid-template-columns: auto auto; AREA DA TELA
128. css 1 2 3 4 5 6 grid-template-columns: auto 1fr;
129. css 1 2 3 4 5 6 grid-template-columns: 1fr 1fr;
130. css 1 2 3 4 5 6 grid-template-columns: 2fr 1fr;
131. css content grid-template-columns: auto minmax(min-content, 1fr); 1 2 3 4 5 6
132. css content 1 3 4 5 6 RESIZE grid-template-columns: auto minmax(min-content, 1fr);
133. css content 1 3 4 5 6 RESIZE MAIS grid-template-columns: auto minmax(min-content, 1fr);
134. minmax() minmax(800px, 1fr); minmax(2fr, 3fr); minmax(50%, 100%); minmax(10em, 80%); minmax(min-content, 1fr); minmax(70%, max-content); minmax(calc(70% + 80px + 9em), 1fr); minmax(min-content, max-content) = auto
135. mão na massa... ASSOCIANDO CONTEUDO
136. <div class="container"> html 1 2 3 4 5 6 </div>
137. html <div class="reg5">c5</div> <div class="reg1">c1</div> <div class="reg2">c2</div> <div class="reg3">c3</div> <div class="reg4">c4</div> • sem blocos para linha/coluna <div class="reg6">c6</div> 1 2 3 4 5 6 <div class="container"> </div>
138. html • a ordem nao importa 1 2 3 4 5 6 <div class="container"> </div> <div class="reg5">c5</div> <div class="reg1">c1</div> <div class="reg2">c2</div> <div class="reg3">c3</div> <div class="reg4">c4</div> <div class="reg6">c6</div>
139. css 2 3 4 5 6 .reg1 { grid-column: 1; grid-row: 1; } c1
140. css 2 3 5 6 .reg1 { grid-column: 1; grid-row: 1; } c1 .reg4 { grid-column: 2; grid-row: 2; } c4
141. css 2 5 6 .reg1 { grid-column: 1; grid-row: 1; } c1 .reg4 { grid-column: 2; grid-row: 2; } c4 .reg3 { grid-column: 1; grid-row: 2; } c3
142. css 2 5 6 .reg1 { grid-column: 1; grid-row: 1; } c1 .reg4 { grid-column: 2; grid-row: 2; } c4 .reg3, .reg6 { grid-column: 1; grid-row: 2; } c3 c6
143. e não é só isso... •Subgrids •Span de conteudo •Alinhamento
144. TEMPLATES
145. grid-template header aside content footer .container { display: grid; grid-template-areas: "header header" "aside content" "footer footer"; }
146. grid-template .container { display: grid; grid-template-areas: "header header" "aside content" "footer footer"; }
147. grid-template .container { display: grid; grid-template-areas: "header header" "aside content" "footer footer"; } .reg1 { grid-area: header } .reg2 { grid-area: aside } .reg3 { grid-area: content } .reg4 { grid-area: content } .reg5 { grid-area: content } .reg6 { grid-area: footer }
148. templates responsivos header menu content aside footer
149. templates responsivos header menu content footer aside
150. templates responsivos @media (orientation: landscape){ .container { grid-template-areas: "header header header" "menu content aside" "footer footer footer"; } } @media (orientation: portrait){ .container { grid-template-areas: "header header" "menu menu" "content content" "aside footer"; } }
151. tabelas box model flexbox regions exclusions 1990 1995 1998 2012 ? & <pre> grid ?
152. ?
153. obrigado! @LOOPINFINITO LOOPINFINITO.COM.BR