Prochain SlideShare
CSS Grid vs. Flexbox
- 1. CSS Grid vs. Flexible Box @evalica
- 2. Layout Evolution
- 3. ● CSS2 ● CSS3 CSS2.1 ● no ● CSS3 Level
- 4. Modules Timeline
- 5. Layout Specifications Float Display Position Flex Grid Launched 1996- 1996-2011- 2008-2011- 2009-2016-2018- 2012-2017- Level CSS1 CSS1, CSS2.1 CSS2.1 CSS3, Lvl1 CSS3, Lvl1 Maturity REC REC REC CR CR Syntax float: none|left|right| initial|inherit; display: none|inline|block| List-item| inline-block|table| ...; position: static|absolute| Fixed|relative| Sticky|initial| inherit; display: flex; flex: flex-grow flex-shrink flex-basis|auto| initial|inherit; display: grid; grid: none|grid-template- rows / grid-template-colum ns|grid-template-ar eas|grid-template-r ows / [grid-auto-flow] grid-auto-columns|[ grid-auto-flow] grid-auto-rows / grid-template-colum ns|initial|inherit; CR REC
- 6. Guides & Documentation MDN: Flexbox CSS Tricks Guide MDN: Grid CSS Tricks Guide
- 7. Screencasts Tutorials
- 8. Game Tutorials Flexbox Froggy Grid Garden
- 9. Grid vs. Flex
- 10. ● one direction ● ● direction-agnostic ● cannot overlap Flexible Box
- 11. ● two directions ● ● overlap CSS Grid
- 12. Can I use? Flexible Box 98.30% JUN 2019 @supports not ((display: flex) and (display: grid)) { div { float: left; } } CR .
- 13. @supports (display: grid) { .wrapper ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } } Can I use? CSS Grid 92.03% JUN 2019CR .
- 14. Basic Alternatives Float GridFlex <div class="container"> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d">D</div> <div class="box e">E</div> <div class="box f">F</div> </div> .container { } .box { float: left; margin: 5px; width: 100px; } .container { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, 100px); } .box { } .container { display: flex; flex-wrap: wrap; } .box { flex-basis: 100px; margin: 5px; }
- 15. Firefox Nightly
- 16. .a { grid-column: 1 / 3; grid-row: 1; } .b { grid-column: 3; grid-row: 1 / 3; } .c { grid-column: 1; grid-row: 2 / 4; } .a { } .b { } .c { } .container { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 100px); } Grid Overlap .a { grid-column: 1; grid-row: 1; } .b { grid-column: 2; grid-row: 1; } .c { grid-column: 3; grid-row: 1; }
- 17. Bootstrap 4 - FlexBootstrap 3 - Float <div class="container"> <div class="row"> <div class="col-xs-4">A</div> <div class="col-xs-4">B</div> <div class="col-xs-4">C</div> </div> </div> Grid <div class="container"> <div class="row"> <div class="col">A</div> <div class="col">B</div> <div class="col">C</div> </div> </div> <div class="container"> <div class="col">A</div> <div class="col">B</div> <div class="col">C</div> </div> .container { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 10px; } .col { grid-column: span 4; } .row { display: flex; } .col { flex-basis: 0; flex-grow: 1; }
- 18. Nested Layout
- 19. Layouts
- 20. .header { grid-area: H; } .panels.A { grid-area: A; } .panels.B { grid-area: B; } .content { grid-area: C; } .footer { grid-area: F; } <body> <div class="header">H</div> <div class="content">C</div> <div class="panels A">A</div> <div class="panels B">B</div> <div class="footer">F</div> </body> Grid Areas - Easy Prototyping body { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr 4fr 1fr; grid-template-areas: "H H H H H H H H H H H H" "A C C C C C C C C C C B" "F F F F F F F F F F F F"; }
- 21. Layouts 4-134-12
- 22. Display: contents <body> <div class="header">H</div> <div class="content">C</div> <div class="panels A">A</div> <div class="panels B">B</div> <div class="footer">F</div> </body> <body> <div class="header">H</div> <div class="container"> <div class="container"> <div class="content">C</div> <div class="panels A">A</div> </div> <div class="panels B">B</div> </div> <div class="footer">F</div> </body> .container { display: contents; }
- 23. Can I use? display: contents 82.38% JUN 2019 ul, ol { list-style: none; display: contents; } WD .
- 24. .download-option { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; } <div class="download-options"> <div class="download-option"> <div>...</div> <h3>...</h3> <ul><li>...</li></ul> <p>...</p> <div><a>...</a><a>...</a></div> </div> ... SubGrid - Cards Alignment .download-options { display: grid; grid-template-rows: repeat(5, auto); }
- 25. Can I use? Subgrid 0.0% JUN 2019 .items { display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(100px, auto); } WD .
- 26. ● ● ● ● ● ● Conclusions: Grid vs. Flex
- 27. Thank you @evalica #iscss
- 28. References ● A Complete Guide to Flexbox ● A Complete Guide to Grid ● MDN: CSS layout ● MDN: Subgrid ● Grid by Example ● The Experimental Layouts Lab ● [Games] Grid Garden + Flexbox Froggy ● [Video] Flexbox vs. CSS Grid — Which is Better? ● [Video] Hello Subgrid! ● [Video] CSS Grid: Moving From CSS Frameworks To CSS Grid (2018 and beyond) ● CSS Grids — How Everyone Has Been Building The Web Wrong Before 2018
Identifiez-vous pour voir les commentaires