Tools

List of Responsive Grid System Frameworks

Dec 14, 2012 insic 1 Comment

If you develop a grid based design website one thing you need to consider is having it responsive so that it will intelligently adapt the small screen devices. You can start developing your own responsive grid system or choose what is already available in the internet for free and saves a lot of time.

Below is the list of high quality responsive grid system frameworks and tool available. Choose whats is best fit your need.

Golden Grid System


A folding grid for responsive design. 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.

Features:

  • Folding columns
  • Elastic gutters
  • Zoomable baseline grid
  • Golden Gridlet

Demo

Responsive Grid System


Spectacularly Easy Responsive Design. The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.

Features:

  • Have Any Number of Columns
  • Scales to Any Width
  • It’s Smart
  • You Can Put the Content First
  • It plugs into your existing HTML and CSS, and it’s so easy to do.
  • Mobile versions of the grid are already baked in, or you can cook up your own.
  • Very Easy to use

Demo

SimpleGrid


As its name implies, a simple grid system, Just start with the .grid wrapper. Inside the wrapper Create divs with a class of .row. Inside each row, create slots for content. Apply the associated .slot-# class, and voila!

Features:

  • Fast and easy to use
  • Grid Nestings
  • Simple
  • and Simple :)

Demo

1140 CSS Grid


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.

Features:

  • 12 columns
  • Cross Browsers
  • Simple Markup
  • Photoshop Template Included

Demo

Zen Grids


A responsive grid system built with the power of Sass. As what their tagline is “Limitless layouts, one simple system”. Design responsive, adaptive or fixed-width Unburden your mind! No more Math! Let Sass do the work. Free your creativity!

Demo

Responsive.gs


Simple CSS framework for fast, intuitive development of responsive websites. Built using the ‘Mobile First’ approach, ‘clearfix’ for clearing floats, box-sizing: border-box for adding additional padding to elements, and weighs less then 1kb compressed. Responsive design isn’t hard, you’ve just never used responsive.gs.

Demo

34 Responsive Grid System


34Grid is a Responsive Grid System based on “equally distributed columns” layout basis. In contrast to other great grid systems, 34Grid provides equally distributed columns for each row. (and also column complements for inequal distributions)

If you’re already familiar with grid systems and responsive web design just create&download a bundle and see what is inside. Else you may start with resizing your browser window.

Demo

About the author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.