Montando layouts em um mini game chamado Browser

Vamos entrar num jogo divertido revivendo o passado desde as tabelas até um futuro, que na verdade já é o presente chamado CSS Grid. Em cada jogada você vai entender que CSS Grid é uma realidade que vai revolucionar a forma como você desenvolve Layouts e estará em suas mãos como você irá querer montar layouts ao longo da sua vida, é claro que você não vai querer ficar pra trás né mesmo? Let´s go.

Transcript

1. Montando layouts em um mini game chamado Browser
2. Mother, WWcode Leader, Organizer of FEMUGPE, Front-End Engineer and CSS Evangelist <3 I love running and ride a bike! @samorim02 @simoneas02 simoneas02.github.io Epitrack
3. <table> <td></td> </table> .box { display: inline-block; } .box { float: left; } .container { display: flex; } O que fez a cabeça da moçada <3
6. http://bit.ly/2fCh2pW
7. Um modulo CSS3 que define um grid otimizado para interfaces CSS Grid Layout Module Level 1 w3.org/TR/css3-grid-layout/
9. Layouts unidimensionais w3.org/TR/css-flexbox-1/
10. w3.org/TR/css-flexbox-1/ Layouts bidimensionais
12. As linhas que dividem o grid.
13. É o termo genérico para o espaço entre duas grid lines, verticais ou horizontais.
14. Também conhecida como grid item. É o espaçamento entre duas line grids verticais e duas horizontais.
15. Um ou mais grid items (grid cells)
17. <div class=“container”> <div class=“a”>A</div> <div class=“b”>B</div> <div class=“c”>C</div> <div class=“d”>D</div> <div class=“e”>E</div> <div class=“f”>F</div> </div>
19. .container { display: grid; } .container { display: inline-grid; }
21. .container { display: grid; } grid-template-rows: 100px 100px; grid-template-columns: 120px 120px 120px; 100px; A B C D E F 1 column 2 column 3 column 2 row 1 row 3 row
23. .a { } grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; .f { } grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; B C D A E F
24. Shorthands
25. .a { } grid-column: 1 / 2; grid-row: 1 / 2; .a { } grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; .a { } grid-area: 1 / 1 / 2 / 2; B C D A E F
27. A B C .container { display: grid; } grid-template-rows: 100px; grid-template-columns: 100px auto 100px; .container { display: grid; } grid-template-rows: 100px; grid-template-columns: 100px 1fr 100px; A B C
28. .container { display: grid; } grid-template-rows: 100px; grid-template-columns: 1fr 1fr 1fr; .container { display: grid; } grid-template-rows: 100px; grid-template-columns: 2fr 1fr 1fr; A B C 1 + 1 + 1 = 3 1 1 1 2 + 1 + 1 = 4 A B C 2 1 1
30. A B C .container { display: grid; } grid-template-rows: 100px; grid-template-columns: 100px repeat(2, 1fr); .container { display: grid; } grid-template-rows: 100px; grid-template-columns: repeat(3, 100px); 100px 11fr 1fr A B C 100px 100px 100px
32. ... grid-gap: 20px 10px; .... .container { display: grid; } grid-template-rows: 100px 100px; grid-template-columns: 120px 120px 120px; A B C D E F 20px 20px 20px grid-rows-gap: 20px; grid-columns-gap: 20px;
34. .a {grid-area: header;} .b {grid-area: aside;} .c {grid-area: main;} .d {grid-area: footer;} .container { display: grid; grid-template-rows: auto; grid-template-columns: auto; grid-template-areas: “header header header” “aside main main” “aside content content” “footer footer footer”; } main header content aside footer
36. main header content aside footer @media(max-width: 666px) { } … grid-template-areas: “header header header” “aside main main” “aside content content” “footer footer footer”; … .container { grid-template-areas: “aside header header” “aside main main” “aside main main” “content footer footer”; } main header content aside footer
38. Parcial / prefixo -ms Soportado caniuse.com/#feat=css-grid
43. gridbyexample.com/ css-tricks.com/snippets/css/complete-guide-grid/ Grid by Example - Rachel Andrew Complete guide - CSS Tricks
44. bit.ly/aprendendo-grid-layout
45. github.com/simoneas02/awesome-grid-layout
47. @simoneas02