Learn the Flexbox based powerhouse XY Grid

Lesson #176Foundation

This is part four of our series on Flexbox. By now you should have a good understanding of how Flexbox’s behavior, syntax, and positioning properties. This lesson is all about the new Flexbox based XY Grid. The Foundation XY Grid is huge advancement in Grids. It’s inspired by CSS Grid, but uses Flexbox under the hood which is supported by browsers now. This mean you can take advantage of Flexbox, equal height containers, auto and shrink sizing, vertical and horizontal layouts (hence the XY name) and lots more. You’ll come away knowing the ins-and-outs of the XY Grid to create complex layouts faster and with less code.