Syntax - Tasty Web Development Treats Hasty Treat - CSS Grid Masonry (Grid Level 3)
Nov 16, 2020
Discover the exciting world of CSS Grid Level 3 and its innovative masonry layouts. The hosts delve into how this feature enhances item placement and flexibility, revolutionizing web design. They discuss the implicit grid and its role in modern layouts, and share thoughts on empowering developers with new layout tools. The conversation also touches on the potential of masonry layouts in design, highlighting both opportunities and considerations for accessibility. Tune in for insights that could transform your approach to CSS!
AI Snips
Chapters
Transcript
Episode notes
CSS Grid Masonry
- CSS Grid's initial release solved many layout problems, but not masonry layouts.
- CSS Grid Level 3 now addresses this with a new masonry layout feature.
Implementing Masonry
- Choose one axis (rows or columns) for masonry layout in CSS Grid Level 3.
- Set
masonry-auto-flowto control item placement and flow.
Masonry Autoflow: Next
masonry-auto-flow: nextprevents items from filling empty spaces in masonry layouts.- It forces items to the next available line, changing the typical masonry behavior.