Das Tabelas ao Grid CSS

A evolução de criação de layouts das tabelas ao Grid CSS

Transcript

1. Born 01/01/17
2. CSS GRID LAYOUT グリッドレイアウト
3. Simone Amorim Mother, WWcode Leader and studying for become a Front-End Developer and CSS Evangelist <3 I love running and ride a bike! @samorim02 @simoneas02 simoneas02.github.io
4. CSS LAYOUTS ONTEM 昨日のCSSレイアウト
5. <table> <td></td> </table> Table
6. Table .box { display: inline-block; } inline
7. Table inline .box { float: left; } Float
8. Table inline Float .container { display: flex; } Flex
9. Grid Layout?
10. Biblioteca ou framework?
11. Um modulo CSS3 que define um grid otimizado para interfaces CSS GRID LAYOUT CSS Grid Layout Module Level 1 w3.org/TR/css3-grid-layout/
12. Grid Layout x Flexbox
13. FLEXBOX Layouts unidimensionais w3.org/TR/css-flexbox-1/
14. GRID LAYOUT w3.org/TR/css3-grid-layout/ Layouts bidimensionais
15. TERMINOLOGiA 用語
16. GRID LINES As linhas que dividem o grid.
17. GRID TRACK É o termo genérico para o espaço entre duas grid lines, verticais ou horizontais.
18. GRID CELLS Também conhecida como grid item. É o espaçamento entre duas line grids verticais e duas horizontais.
19. GRID AREA Um ou mais grid items (grid cells)
20. CODE コード
21. HTML <div class=“grid-container”> </div> <div class=“grid-item a”>A</div> <div class=“grid-item b”>B</div> <div class=“grid-item f”>F</div> <div class=“grid-item e”>E</div> <div class=“grid-item d”>D</div> <div class=“grid-item c”>C</div>
22. DEFININDO UM GRID GRIDの定義
23. .grid-container { display: grid; } .grid- container { display: inline-grid; }
24. LINE-BASE PLACEMENT ラインベース配置
25. A B C D E F 1 column 2 column 3 column 2 row 1 row 3 row .grid-container { display: grid; } grid-template-rows: 100px 100px; grid-template-columns: 120px 120px 120px; 100px;
26. LINE-BASE POSITIONING ラインベース位置決め
27. .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
28. SHORTHANDS ショーランズ
29. .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
30. GRID GAP グリッドギャップ
31. … … grid-row-gap: 10px; grid-column-gap: 10px; … … grid-gap: 10px;
32. AREA NAMING エリア名
33. .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 .e {grid-area: content;}
34. RESPONSIVE WEB DESIGN レスポンシブウェブデザイン
35. main header content aside footer @media screen and (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
36. MAIS もっと
37. caniuse.com/#feat=css-grid SUPORTE Parcial / prefixo -ms Soportado
38. QUER SABER MAIS github.com/simoneas02/awesome-grid-layout A curated list of CSS Grid Layout Module or only Css Grid もっと知りたいです
39. bit.ly/aprendendo-grid-layout
40. Freedom 03/04/17
41. “Não importa ser Front-end, Desiger, Back-end.. O importante é amar o que você faz! Dinheiro e reconhecimento são apenas uma consequência” by Bernard de Luna