Download as PDF, PPTX
![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](https://image.slidesharecdn.com/gridvs-190703164254/75/CSS-Grid-vs-Flexbox-5-2048.jpg)
![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](https://image.slidesharecdn.com/gridvs-190703164254/75/CSS-Grid-vs-Flexbox-29-2048.jpg)
Uploaded byEcaterina Moraru (Valica)
CSS Grid vs. Flexbox
The document compares CSS Grid and Flexbox layout techniques, highlighting their specifications, functionalities, and use cases. CSS Grid allows for two-dimensional layouts and overlapping elements, while Flexbox is one-directional and better suited for simpler layouts. Additionally, the document includes examples, usage statistics, and resources for further study.
CSS Grid vs. Flexbox
- 1. CSS Grid vs. FlexibleBox @evalica
- 2.
- 3. ● CSS2 ● CSS3 CSS2.1 ●no ● CSS3 Level
- 4.
- 5. Layout Specifications Float DisplayPosition 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
- 7. Guides & Documentation MDN:Flexbox CSS Tricks Guide MDN: Grid CSS Tricks Guide
- 8.
- 9. Game Tutorials Flexbox FroggyGrid Garden
- 10.
- 11. ● one direction ● ●direction-agnostic ● cannot overlap Flexible Box
- 12. ● two directions ● ●overlap CSS Grid
- 13. Can I use? FlexibleBox 98.30% JUN 2019 @supports not ((display: flex) and (display: grid)) { div { float: left; } } CR .
- 14. @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 .
- 15. Basic Alternatives Float GridFlex <divclass="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; }
- 16.
- 17. .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; }
- 18. 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; }
- 19.
- 20.
- 21. .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"; }
- 22.
- 23. Display: contents <body> <div class="header">H</div> <divclass="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; }
- 24. Can I use? display:contents 82.38% JUN 2019 ul, ol { list-style: none; display: contents; } WD .
- 25. .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); }
- 26. Can I use? Subgrid 0.0%JUN 2019 .items { display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(100px, auto); } WD .
- 27.
- 28.
- 29. References ● A CompleteGuide 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