CSS Grids - fact or fiction?

Here you can find the presentation takeaway from my meetup talk session:
https://www.meetup.com/Leipzig-Software-Development-Meetup/events/242461823/

"CSS Grids are the new cutting-edge technology to modern frontend development. But.. we can not use them yet.. or can we? CSS Grids are a kind of promise, a brave new world for all frontend developers and we are looking forward to this since it became Candidate Recommendation by the W3C. But there are still a few things to tackle before it can become productive. So.. what will this talk be about? We will have a short look at the technology itself and see how it works and compare it to the current state of the art (flexbox, grid systems, frameworks etc..). Then we will have a case study how it behaves in the real world and what problems we need to tackle!"

Transcript

1. CSS Grids - fact or fiction? - Leipzig Software Development Meetup - Annett Cibulka, 10.01.2018, Leipzig, Germany
2. Welcome :)
3. What we wanna do? 1. Why CSS Grids? 2. CSS Grids short explained 3. Real World Example 4. Tipps & Tricks 5. Q&A 6. Want more? Agenda
4. The Speaker
5. Some words about me… • Hi, I’m Annett :) ! • mother of a two years old lovely daughter • over 14 years experience as (frontend) web developer • “founding member” of the trivago office in leipzig (started 2014) • xing the speaker
6. - 1. Why CSS Grids? -
7. CSS Grids - Why? • new layout standard for modern frontends • a lot of new possibilities and flexibility • easy to learn (but hard to master) • faster rendering than flexbox (link) • responsive out of the box (even without media queries) 1. Why CSS Grids?
8. Why? - because we can :) ! • W3C Candidate Recommendation! • Wide Browser support: 1. Why CSS Grids?
9. 2. CSS Grids: - short explained -
10. CSS GRID Basic Principle 2. CSS Grids short explained
11. CSS GRID Terminology 2. CSS Grids short explained Grid Container: establishes the grid formatting context
12. CSS GRID Terminology 2. CSS Grids short explained Grid Line: divides the Grid Container space into columns and rows 1 2 3 4 5 1 2 3
13. CSS GRID Terminology 2. CSS Grids short explained Grid Cell: space between 4 Grid Lines
14. CSS GRID Terminology 2. CSS Grids short explained Grid Track: the space between two adjacent Grid Lines
15. CSS GRID Terminology 2. CSS Grids short explained Grid Area: total space surrounded by four grid lines
16. Basic Grid Example 2. CSS Grids short explained HTML CSS Result
17. Important Grid Properties -grid-column 2. CSS Grids short explained • “grid-column”/”grid-row”: Grid Item Line-based Placement shorthand for
18. Important Grid Properties 2. CSS Grids short explained • “grid-gap”: easy control of gaps between Grid Elements
19. Important Grid Properties 2. CSS Grids short explained • “grid-template-areas”
20. new unit “fr” = fraction 2. CSS Grids short explained Fr = fractional unit and 1fr is for 1 part of the available space
21. minmax() - function 2. CSS Grids short explained Grid Tracks that have a size value between a certain range On resize the 1st column doesn’t shrink to less than 150px Tipp: You can also use the auto, min-content and max-content keywords as the min or max values.
22. repeat() - function 2. CSS Grids short explained represents a repeated fragment of the track list
23. autofill/autofit 2. CSS Grids short explained • auto-fill: FILLS the row with as many columns as it can fit. • auto-fit: FITS the CURRENTLY AVAILABLE columns into the space by expanding them
24. Grid Debugging - Firefox Grid Inspector 2. CSS Grids short explained firefox grid inspector
25. - 3. real world example -
26. CSS GRID - Real world example 3. real world example
27. CSS GRID - Real world example • ... 3. real world example
28. CSS GRID - Real world example 2. CSS Grids short explained Advantages: • reduced code • reduced complexity • easy to read • easy to maintain • easy to work with • future-proof code • faster (less code, ~ -50% !)
29. CSS GRID - Real world example 3. real world example
30. - 4. Tipps & Tricks -
31. Tipps & Tricks 4. Tipps & Tricks • “Old Browser” Support ◦ prefixes for IE10/IE11 available: ▪ -ms-grid-columns, -ms-grid-rows ▪ but be careful! old spec support ◦ Fallback techniques ▪ “float”: float properties do not have any effect on grid items ▪ “display: inline-block”: same as float, no effect on grid items ▪ Multi-column layout properties ▪ see also: • grid-fallbacks • CSS Grid Progressive Enhancement
32. Tipps & Tricks 4. Tipps & Tricks • Does CSS Grid Replace Flexbox? (link) No. Well. Mostly No. ◦ Grid can do things Flexbox can't do. ◦ Flexbox can do things Grid can't do. ◦ They can work together: a Grid Item can be a Flexbox Container. A flex item can be a Grid Container. “Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.” - Rachel Andrews -
33. Tipps & Tricks 4. Tipps & Tricks • Advanced Grid Nesting - “subgrid” ◦ CSS subgrids up to come ◦ currently marked as “at risk” in the editor’s draft of the Level 1 spec and may get punted to Level 2 due to the complexity of implementation ◦ Article
34. - 5. Q & A -
35. Let’s discuss :) ! Now it is your turn! • What do you think about CSS Grids? (Great, okay.., uninteresting?) • Do you plan to use CSS Grids or do you use CSS Grids already? • What are your experiences with CSS Grids? • Did you have any problems with CSS Grids while implementation? • Any other ideas or questions? 5. Q & A
36. - 6. Want more? -
37. Want more? Check out some additional resources: • "CSS Tricks" CSS Grid guide • https://gridbyexample.com/ • "A LIST APART" Practical Grid Guide • Mozilla CSS Grid Layout documentation • CSS Grid Garden • Smashing Magazine: CSS Grid Challenge • Smashing Magazine: CSS Grids, Flexbox and Box Alignement • Firefox CSS Grid Inspector • Grid Fallbacks Want more?
38. Thank you very much!