17 Flexible Grid Tools and Frameworks for Responsive Websites

Today’s websites are no more nifty looking websites rather they have been evolved and improved. Different new technologies and innovations in the web industry have changed the whole criteria of web development. Today we have responsive websites that are interactive enough that they engage the visitors for relatively longer period of time. This is the reason why majority of websites are now shifting towards responsive layouts. From web design to development, there are all services that allow us creating a website for free.

Responsive websites have a flexible fluid grid including responsive images. In this collection, we are presenting 17 flexible grid tools and frameworks to help you create visually appealing and fully functional responsive websites. Here is the complete collection for you. Let us have a look at this collection and enjoy! Feel free to share your opinions with us via comment section below.

Gridpak

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

Gridpak

Fluid Grids

A fluid grid calculator to build your own fluid grid systems.

Fluid Grids

Golden Grid System

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.

Golden Grid System

Semantic Grid System

The Semantic Grid System is a modern approach to the CSS grid. It allows you to set column and gutter widths, choose the number of columns, switch between pixels and percentages, and achieve responsive layouts, all without any unsemantic .grid_x classes in your markup. By default it’s powered by LESS.js, but also supports SCSS and Stylus.

Semantic Grid System

Columnal CSS Grid System

Columnal makes responsive web design a little easier. It is 1140px wide, but since it is fluid, will respond to the width of most browsers. If the browser gets thin enough, the site will change to a mobile-friendly layout.

Columnal CSS Grid System

Simple Grid

Simple Grid is prepared for 4 distinct ranges of screen size: screens 720px, screens > than 985px, and screens > than 1235px. So people visiting your site will receive a layout that’s tuned to the size of their browser window. Say goodbye to horizontal scrollbars.

Simple Grid

1140PX 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.

1140PX CSS Grid

Responsive Calculator

Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.

Responsive Calculator

320 and Up

With 320 and up framework you can build flexible layouts that respond and react to desktop, mobile and tablet screens.

320 and Up

The Grid

It is a 12-column flexible grid that can scale out to an arbitrary size (defined by the max-width of the row) that’s also easily nested, so you can build out complicated layouts without creating a lot of custom elements. And when the Grid isn’t enough for your site, it just gets out of the way.

The Grid

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

Gridless

Responsive Design bookmarklet

It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices.

Responsive Design bookmarklet

Adaptive CSS

Adapt.js is a lightweight (848 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

Adaptive CSS

Titan Framework

With Titan Frameworkyou can create responsive layouts that adjust to any screen resolution at maximum width.

Titan Framework

Responsive Grid System

Fluid grid CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.

Responsive Grid System

Gumby

The Grid lets you lay out pages quickly and easily in a natural, logical way. The Gumby Framework’s grid system can be customized and molded to fit your every need — it’s easily adapted to any screen size or application. The possibilities are endless; the results are extraordinary.

Gumby

Less+ Framework

Less+ Framework is a cross-device CSS grid system using media queries. Less+ empowers designers and developers to build websites that can adapt their content depending on screen resolution.

Less+ Framework


design

About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


5 Comments

  1. siddanth says:

    Nice collection, but so many above frameworks have many flaws, we already tested those.

    So we prefer IVORY Framework is the best one than many other frameowrks.

    http://weice.in/ivory
    https://github.com/kanthvallampati/IVORY

  2. Zenn says:

    Nice finds, thanks. Grids are always useful when i work on projects.

  3. Raj says:

    Great tools.Thanks for sharing

  4. Kzee says:

    Really cool, Thanks a million, found a tool that checks the current popular phone and tablet screen sizes, http://digitalgeek.com.au/responsive_website_design/

  5. Wow! Can’t believe that there are so many grids out there! Do they really get used? I tend to use a fluid grid layout in Dreamweaver rather than hash up a framework.