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.
- Folding columns
- Elastic gutters
- Zoomable baseline grid
- Golden Gridlet
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.
- 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
As its name implies, a simple grid system, Just start with the
.gridwrapper. Inside the wrapper Create divs with a class of
.row. Inside each row, create slots for content. Apply the associated
.slot-#class, and voila!
- Fast and easy to use
- Grid Nestings
- and Simple
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.
- 12 columns
- Cross Browsers
- Simple Markup
- Photoshop Template Included
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!
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.
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.