Multiple Breakpoints
Use Ghost Grid to visualize a responsive column layout by setting up different columns at various breakpoints. Resize this screen to see an example.
Muliple Grid Instances
Use the `ghost.containingElement` property to bind the grid to a specific element in your layout. You can create multiple ghost grids this way for complex layouts.
Columns
Visualize your columns while you develop so you can rest assured you're within your bounds and, more importantly, make design decisions based on something you can see.
Plays well with Susy
I love using Susy to quickly get started with complex fluid grid layouts so I made sure this worked well with it. The structure of this project was inspired heavily by Susy and should therefore be familiar to any past users of Susy.
Baseline Grid
For all the masochistic perfectionists out there like me who want to make sure their layout maintains vertical rhythm, you can set a baseline grid for each breakpoint.
Works with Flexbox
Flexbox is the future of web layout, there's no doubt about that. However, the future isn't here yet, so we must keep using floats. For all you flex box cowboys who are building apps for young people, Ghost Grid supports Flexbox as well.