Basics of CSS Flexbox and Grid

1. flexbox &
grid
@ananth_akr
Bangalore HTML/CSS Meetup

2. Most Asked
Question in CSS?

3. Vertically and
Horizontally
center a div

7. Flexbox to the
rescue

8. Flexbox
• One Dimensional layout model
• Alters Width/Height of items based on
container size
• Truely flexible(change, resize, stretch,
shirnk)

9. Flex layout

10. Properties for Flex Container
• display:flex/inline-flex
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content
https://codepen.io/AnanthAkr/pen/pozQRNq

11. Properties for Flex Items
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self
https://codepen.io/AnanthAkr/pen/pozQRNq

12. Browser Support
https://caniuse.com/#feat=flexbox

13. What about 2D?

14. Grid
• Two Dimensional layout model
• Can align page into columns and rows
• Very powerful layout system
• Can be used to create any type of layouts

15. Terminologies
• Grid Container
• Grid Item
• Grid Line
• Grid Track
• Grid Cell
• Grid Area

16. Grid Line Grid Track
Grid AreaGrid Cell

17. Properties for Grid Container
• display:grid/inner-grid
• grid-template-columns & grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap & grid-row-gap
• grid-gap
• justify-item, align-items & place-items
• justify-content, align-content & place-content
• grid-auto-columns & grid-auto-rows
• grid-auto-flow
• grid
https://codepen.io/AnanthAkr/pen/mdbaMEx
https://codepen.io/AnanthAkr/pen/pozQQPQ

18. Properties for Grid Item
• grid-column-start & grid-column-end
• grid-row-start & grid-row-end
• grid-column & grid-row
• grid-area
• justify-self, align-self & place-self
https://codepen.io/AnanthAkr/pen/gOYQEpm

19. Browser Support
https://caniuse.com/#feat=css-grid

20. Hasty Treats
fr unit
https://codepen.io/AnanthAkr/pen/eYOQyzZ

21. Hasty Treats
minmax()
https://codepen.io/AnanthAkr/pen/eYOQyzZ

22. Hasty Treats
display:contents
https://codepen.io/AnanthAkr/pen/eYOQyzZ

23. Do we need CSS
Frameworks?

24. Questions?

25. Thank you!
https://twitter.com/ananth_akr
https://github.com/Ananthakr
https://codepen.com/Ananthakr

26. References
• https://developer.mozilla.org/en-US/docs/Web/CSS/
CSS_Flexible_Box_Layout
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://developer.mozilla.org/en-US/docs/Web/CSS/grid
• https://css-tricks.com/snippets/css/complete-guide-grid/
• https://gridbyexample.com/

27. fin.