Best Grids for Responsive Design

Here are some of the best grids for responsive design. If you’re looking to streamline your work flow, or make your life easier. These grids will help even the busiest freelance web designer.

1140 CSS Grid

This grid may not be the best approach for all projects. But it is fluid, and responsive when reaching mobile. So it’s better than fixed width!

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

Skeleton

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development. Skeleton is very simple and based on 960grid. So it’s familiar and a good starting point for anyone using grids for responsive design.

Semantic Grid

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any .grid_x classes in your markup. Oh, and did we mention it’s responsive? I have heard great things about this grid for responsive design. I’m going to try it out in my next project. I’ll keep ya posted.

Golden Grid

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.

Simple Grid

I havent had a chance to try this one yet. But i keep seeing it more and more. Responsive. Infinite nesting. One class per element. Simple.

Frameless

This grid takes a slightly different approach. Adapt column by column, not pixel by pixel…Worth a shot!

There you have it. Some of the best grids for responsive design. Let me know what grids you’re using and if you have some other options. Thanks!!