Exploring The Digital Frontier: CSS Grid & Flexbox

A presentation on CSS Grid & Flexbox

Transcript

1. Exploring The Digital Frontier: CSS Grid & Flexbox Natasha Carlyon Full Stack Software Developer @nscarlyon natasha.carlyon@gmail.com
2. My Journey
3. Flexbox
4. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.
6. What about those confusing properties like flex-grow?
7. The flex-basis CSS property sets the initial main size of a flex item.
8. The flex-grow CSS property sets the flex grow factor of a flex item main size. It specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
9. The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
10. CSS Grid
11. CSS Grid Layout excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer.
12. Flexbox vs CSS Grid
13. Browser Support
16. Should I use Bootstrap or CSS Grid?
17. Bootstrap
18. It depends
19. CSS Grid Bootstrap • Higher learning curve • Less html; more CSS • More flexibility • Built in • Get started quickly • More html; less CSS • 12 columns layout • Third party
20. How do I get better?
21. How do I get better?
22. Deliberate practise!
24. Resources • Solved by Flexbox — Cleaner, hack-free CSS • https://css-tricks.com/snippets/css/a-guide-to-f lexbox/ • Grid by Example • CSS Grid Playground