The 996 Grid: Making Websites Look Great from Desktop to Mobile with Our Responsive Framework

You may have heard about CSS grid frameworks for assisting in web design, such as, 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.

Lastly, the framework includes a slightly modified version of the html5 boilerplate, which offers cross-browser normalization and performance optimizations. The Modernizr JavaScript library is also included which can assist in making sure websites work exactly right, no matter what browser it is viewed in.

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:

9 Responses to “The 996 Grid: Making Websites Look Great from Desktop to Mobile with Our Responsive Framework”

  1. Matt says:

    I am starting to use it more and more. It’s a really good system.

  2. Nate says:

    Hey Carla,

    Love this grid system. I find the 1140 grid feels just a little too wide, even on bigger screens.

    I found your 996 grid after searching for something between 960 and 1140.

    My current goal is to incorporate the 996 grid into the Genesis Framework for WordPress to use as a base template for building new themes.

    I wish you all the best,


  3. Eis says:

    The well-informative article, I’ve read a ton of different posts for the past half per day,
    only that one includes a suitable amount of information to create a
    determination, but your way of providing advice is a lot better for me personally.
    I am quite grateful for you, a excellent post on this subject.

  4. […] safe. The worth is worth it when you evaluate the general effective value. It’s essentially… a lightweight responsibility industrial safe with a gun interior. Look for a lock and secure firm […]

  5. […] a uniform rust on the floor of the elements (inside and out) in about 12 hours. The elements… are then boiled in distilled water, blown dry, then carded, as with rust bluing. Bluing could also […]

  6. […] Unlike different gun safety manufacturers that succumbed to hi-tech fingerprint scan and different… kinds of bio scan characteristic, the HOMAK HS Gun Security Cabinet stays real with the essence of […]

  7. […] in your firearm or different valuables you might wish to keep secure. Part of a gun proprietor…’s duty is to maintain his gun protected and safe, on the same time it must be readily accessible […]

  8. […] solutions. Unlike other gun safety brands that succumbed to hello-tech fingerprint scan and other… kinds of bio scan function, the HOMAK HS Gun Security Cabinet stays real with the essence of very […]

  9. […] features hold undesirable visitors out without making authorized access tough. It can retailer… as much as 30 fingerprints, making it a sensible choice for storage in a industrial setting, and […]

Leave a Reply

Your email address will not be published. Required fields are marked *