I know what you’re thinking, ‘Not another one?’. And I’m sorry to disappoint, but yes, yet another one. You see, the CSS grid system has become a sort of prerequisite for anyone eyeing to become the next greatest web developer. And as such, the people have responded by creating framework after framework hoping to solve this age old problem of layouts. I surely am no different, because nothing says you have arrived like rocking up in your brand new grid system that just works.

Like many, and because of its popularity, Twitter’s Bootstrap was my first real taste at a grid system that just works. It was all going well until one day (during the orchard experience) where I had to stop it from styling a few elements. To say it was a disaster would be putting it lightly. But looking back, it was my lack of experience rather than anything that made things soooo difficult.

Anyway, what I did different to Bootstrap (since all grid systems are compared to it as of late), was to just keep it short and simple. There are no columns classes, because it’s tedious work adding and tracking them I’m lazy. But seriously though, changing a column size means changing siblings too, and I don’t think anyone likes that one bit. Instead we add a class the parent element. That means we only have to concern our self with one element whenever we wish to change column sizes.

The other thing I found odd was all those column sizes. I know the guys who created the framework really put research, time and effort in creating the grid system, and I know there are more experienced people out there who use all those sizes to great effect, but I am yet to find a reason to use the col-xs-1. So to solve that, I stripped my system down to only classes that I think will be using at least once per project.

The next page where you’ll see how I applied the column splitting magic to great effect