CSS Grid layout - De volta para o futuro
1 like712 views
The document discusses CSS Grid Layout, highlighting its importance in building complex web interfaces and its complementary relationship with Flexbox. It provides examples of grid terminology, layout syntax, and responsive design tips. Additionally, it includes references to resources for further learning and browser support for CSS Grid.
CSS Grid layout - De volta para o futuro
- 4. I CSS
- 5. CSS Grid Layout? Um modulo CSS3 que define um grid otimizado para interfaces CSS Grid Layout Module Level 1 O futuro!
- 6. Flexbox Interfaces simplesInterfaces complexas Grid Layout X É o presenteÉ o futuro São diferentes e complementares! Use os dois!
- 7. https://github.com/afonsopacifer/awesome-flexbox A curated list of CSS Flexible Box Layout Module or only Flexbox.
- 9. Terminologia
- 10. Grid Lines São as linhas que dividem o grid.
- 11. Grid Tracks É o termo genérico para o espaço entre duas grid lines, verticais ou horizontais.
- 12. Grid Cells Também conhecida como grid item. É o espaçamento entre duas line grids verticais e duas horizontais.
- 13. Grid Areas Um ou mais grid items (grid cells)
- 14. Show me the code
- 15. <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> HTML
- 16. Grid Container
- 17. .container { display: grid; } .container { display: inline-grid; }
- 19. .container { display: inline-grid; } A B C D E F 1 column 2 column 3 column 2row1row3row grid-template-rows: 100px 100px; grid-template-columns: 120px 120px 120px; 100px;
- 21. .a { } B C D grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; A E .f { } grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; F
- 23. B C D A E F.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;
- 26. C D A E F .a {grid-area: 1 / 1 / 2 / 4;} .b {grid-area: 2 / 1 / 3 / 2;} .c {grid-area: 2 / 2 / 2 / 3;} .d {grid-area: 2 / 3 / 2 / 4;} .e {grid-area: 3 / 1 / 4 / 3;} .d {grid-area: 3 / 3 / 4 / 4;} B @media screen and (max-width: 666px) { } .a {grid-area: 3 / 1 / 2 / 4;} .e {grid-area: 1 / 1 / 2 / 3;} .d {grid-area: 1 / 3 / 2 / 4;} b c d e f A
- 27. fr A nova unidade de medida flex
- 28. A B C .container { display: grid; } grid-template-rows: 100px; grid-template-columns: 100px auto 100px; A B C .container { display: grid; } grid-template-rows: 100px; grid-template-columns: 100px 1fr 100px;
- 29. .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. Nomeando as areas Modo Hardcore
- 31. .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” “aside content content” “. . footer”; } main header content aside footer
- 32. E muito mais
- 33. Qual navegador suporta isso? sintaxe antiga
- 35. Vale a pena aprender?
- 36. Suporte dos navegadores visto por outro angulo http://igalia.github.io/css-grid-layout/enable.html
- 37. Revista W - 2013
- 38. Best New Web Technology https://thenetawards.com/vote/web-tech/css-grid-layout/
- 39. Eu quero usar hoje!
- 41. Onde posso aprender mais?
- 43. https://github.com/afonsopacifer/learning-css-grid-layout Learning CSS Grid Layout
- 44. Obrigado :)