How Can I Make A Semantic Grid System with Bourbon & Neat?
I’ve used Bourbon and Neat on a couple projects recently and have found the Neat grid to be simple and easy to use. These are a few of the things I particularly like about it:
- Rows are determined with styles instead of extra divs which makes it flexible and easy to work with
- Because it doesn’t rely on classes in the html, it’s easy to define different column counts at different breakpoints
- It’s easy to create nested grids with consistent gutter widths
- The built-in visual grid overlay for development is easy to toggle on and off
Here’s an article to get you up and running:
And here’s an in-depth explanation of how the Neat grid works, straight from Will McMahan, the creator: