You may have heard about CSS grid frameworks for assisting in web design, such as 960.gs, Blueprint, or Golden Grid. These grids almost act as wire frames for web design and allow you to streamline your development process while ensuring consistency and cross-browser support. There are many out there to choose from, but I had a few specific requirements. I wanted a grid that had plenty of room for design but didn’t attempt to fill every last pixel. Also the ability to reformat the elements on a page for tablets and mobile was definitely needed. There were quite a few that came close and seemed to work well, but in the end I decided to make my own path through the CSS grid jungle.
Using the 960 grid as a starting point I decided that the 940px inner-space was just too small. Upping that 30 more pixels makes things a little less cramped and allows for a larger gutter between the columns. I wanted to ensure that the overall grid size did not push too close to 1024px because there are those who still use smaller screens, but still has minimal margins on larger resolutions.
After getting the grid dimensions at optimal sizes, I set out on a task of adding media queries to allow the content to restructure based on browser width. There are many grids that implement a “fluid” structure, but avoiding and using a fixed width ensures that content is laid out much more precisely on each screen. Electing to have 3 smaller sizes, they are sized to approximately tablet, landscape mobile and portrait mobile. The first step down still implements a grid structure, however with smaller columns and gutters while still maintaining a readable size. After that the content is stacked to allow mobile users a convenient view of the site without eliminating any content.
The 996 Grid is still a work-in-progress and the latest updates can be viewed on GitHub. Hopefully the 996 Grid will be useful for those who are still searching for a grid and have yet to find what they are looking for.
Read more: http://996Grid.com