XY grid introduction

Foundation 6’s XY grid is a flexbox layout system. A page band typically nests grid-container → grid-x → one or more cell elements. Width, growth, and shrink behavior are controlled with classes—not inline widths.

Core building blocks

• grid-container — centered max-width wrapper with horizontal padding
• grid-x — horizontal flex row (the “X” axis)
• cell — column child; add small-12, medium-6, etc. for track spans
• grid-margin-x / grid-padding-x — gutter between cells

Concepts from CSS flexbox apply directly. Compare Bootstrap’s row/col grid: both divide space into twelfths, but Foundation names the row grid-x and puts breakpoint prefixes on the cell.

Important interview questions and answers

1. Q: Why is it called XY grid?
   A: Rows flow on the X axis (grid-x); vertical stacks use grid-y on the Y axis—one-dimensional flex tracks per direction.
2. Q: Flexbox or CSS Grid in Foundation 6?
   A: The primary layout system is flex-based XY cells; use native CSS Grid separately when you need explicit two-dimensional template areas.

Self-check

1. What three classes form the smallest valid XY layout?
2. What does grid-margin-x add between siblings?