I’ve played with grids quite a bit myself and probably went through 3 or 4 different variations before I got to one I like. I do have a few suggestions for your grid that will make it easier to customize and manage..
It looks like to me you’re using .col to apply your margins to separate your different grid modules which is fine, but will require more math on your end for all of the width percentages, but what happens if you need to adjust that margin? You’ll have to go in and modify all of the widths again? That can be a real pain and frustrating, I’ve done it.
I would add in an extra div or article tag in your “col” divs and then you can target that to apply your paddings while keeping all of your percentages nice and even so you can have:
.span_12 {width:100%;} instead of 97% to account for the margins added and so on. This will help your grid be more reusable and easier to manage from project to project.. I have a pen of an example I’ve created as well if you’d like to check it out and get a better idea of what I mean: Grid Demo
