Responsive Grids With Foundation XY Grid
A task guide to implementing Foundation’s XY Grid for responsive layouts, covering prerequisites, minimal markup, verification, and recovery from flexbox conflicts.
Loading…
ReadMeFeed / Community knowledge
#xy-grid
Real questions. Useful conversations. Find the people who know your stack.
Building a Responsive Layout with Zurb Foundation’s XY Grid
Learn how to create a fully responsive page using Foundation’s XY Grid. The guide covers the desired outcome, prerequisites, markup steps, breakpoint checks, and recovery options if the layout breaks.
foundationFoundation 6 XY Grid: Responsive Layout with grid-x and cell
Use Foundation 6 XY Grid with grid-x, grid-padding-x and cell size classes for responsive flexbox layouts. See the mechanism, limits, common mistakes and how to verify the grid in dev tools.
Mastering Zurb Foundation’s XY Grid: A Practical Guide to Responsive Layouts
Learn how Zurb Foundation’s flexbox‑based XY Grid solves responsive layout challenges. The guide covers its mobile‑first approach, a step‑by‑step example, and practical trade‑offs. Build, test, and adapt the grid for modern browsers today.
Foundation's XY Grid: Responsive Layouts Without Hand-Written Media Queries
Foundation's XY Grid puts responsive layout decisions into breakpoint-prefixed class names instead of scattered media queries — how the classes work, a worked example, and the trade-offs to weigh.
Foundation XY Grid: Minimal Design, Trust Boundaries, and Verification
Learn how to implement Foundation’s XY grid with minimal markup, understand its client‑side trust boundaries, run essential checks, and know when to reconsider the design.
XY Grid Class Adoption Threshold for Multi-Developer Projects
Teams building on Foundation for Sites often face a choice between the class-based XY Grid markup introduced in version 6.4 and the older mixin-based semantic grid approach. Both systems generate comparable CSS output, but their markup patterns differ significantly. The goal of this inquiry is to establish a consistent grid implementation strategy across a c