Flexbox-based Foundation XY Grid - Foundation Flexbox Tutorial - Part 4
👋🏼 Welcome to Part 4 of this 7-part Foundation Flexbox Tutorial Series. In this lesson, you’ll use everything you learned from parts 1-3 to make learning the all-new Foundation XY Grid incredibly easy to learn and understand. We'll dive into the XY Grid's syntax in contrast to the Float Grid, Vertical/Horizontal Positioning, Auto/Shrink Sizing, and how to combine all of these positioning and sizing classes with Foundation's helper classes.
✒️ You can follow along with Rafi using this CodePen: https://codepen.io/rafibomb/pen/XgyYgj
____________________
🏃🏽 Quick Links:
Getting Foundation 6.4 - 0:53
XY Grid Syntax - 3:21
Horizontal Cell Sizing Classes - 4:54
Auto/Shrink Sizing Classes - 14:04
Vertical Cell Sizing Classes - 18:34
Foundation XY Grid Helper Classes - 23:31
____________________
📝 The New Foundation Docs: http://foundation.zurb.com/sites/docs/
📚 Intro to Foundation Course: https://ZURB.com/university/foundatio...
📲 Follow us on Twitter: / zurbfoundation
📅 Stay Up to Date with Foundation: http://foundation.zurb.com/learn/foun...
____________________
🙋🏽 ABOUT ZURB:
ZURB is a product design company that has helped millions of designers create better products, websites and services since 1998. We’re a team of designers, researchers and nerds that help companies design better products, websites and services by uncovering #DesignInsights.
____________________
⁉️ If you have any questions during your adventure with ZURB Foundation, be sure to drop them in the Foundation Forum and we will do our best to resolve your issue. And it may become a future episode!
▶︎ The Foundation Forum: http://foundation.ZURB.com/forum