Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Grid vs. Flexbox

146 views

Published on

Video available at https://www.youtube.com/watch?v=9g8WqKp4BGI
Talk at https://www.meetup.com/IS-CSS/events/262580285/

How do you know which layout technique you need to apply for your use case?

We will be comparing several alternatives (Float, Display, Flex, Grid), describing the strengths and limitations of the available layout modules, putting a focus on Grid.
Although we will have some simpler examples (perfect for beginners), we will also cover more advanced features (like #display: contents# and #subgrid#).

Published in: Technology
  • Be the first to comment

  • Be the first to like this

CSS Grid vs. Flexbox

  1. 1. CSS Grid vs. Flexible Box @evalica
  2. 2. Layout Evolution
  3. 3. ● CSS2 ● CSS3 CSS2.1 ● no ● CSS3 Level
  4. 4. Modules Timeline
  5. 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. 6. Guides & Documentation MDN: Flexbox CSS Tricks Guide MDN: Grid CSS Tricks Guide
  7. 7. Screencasts Tutorials
  8. 8. Game Tutorials Flexbox Froggy Grid Garden
  9. 9. Grid vs. Flex
  10. 10. ● one direction ● ● direction-agnostic ● cannot overlap Flexible Box
  11. 11. ● two directions ● ● overlap CSS Grid
  12. 12. Can I use? Flexible Box 98.30% JUN 2019 @supports not ((display: flex) and (display: grid)) { div { float: left; } } CR .
  13. 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. 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. 15. Firefox Nightly
  16. 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. 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. 18. Nested Layout
  19. 19. Layouts
  20. 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. 21. Layouts 4-134-12
  22. 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. 23. Can I use? display: contents 82.38% JUN 2019 ul, ol { list-style: none; display: contents; } WD .
  24. 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. 25. Can I use? Subgrid 0.0% JUN 2019 .items { display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(100px, auto); } WD .
  26. 26. ● ● ● ● ● ● Conclusions: Grid vs. Flex
  27. 27. Thank you @evalica #iscss
  28. 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

×