13 Best Responsive CSS Grid Systems for Your Web Designs

This post was brought to you with help by MightyDeals

MightyDeals provides daily deals for web designers and developers. They can get you discounts up to 97% off on products and services for web professionals.

Read about MightyDeals

1. Skeleton

Responsive CSS grid: Skeleton

Skeleton is a collection of CSS files for web designers who need to rapidly produce responsive grid layouts. More than just a grid system, Skeleton also offers a few basic features for dealing with common web layout tasks such as a CSS reset for normalizing your CSS.

2. Neat

Responsive CSS grid: Neat

The primary objective of the Neat grid framework is to promote clean semantic HTML markup by using Sass mixins to avoid excess presentional classes and wrapping div elements. Get started with Neat by reading through their docs and studying some examples.

3. Simple Grid

Responsive CSS grid: Simple Grid

If you’re a minimalist, then Simple Grid is a system to check out as it aims to provide you with the bare-minimum you need for creating a responsive CSS grid layout. Also, 1140px is the base width of Simple Grid, not the more-common 1024px, because the Simple Grid creator believes that we’ve outgrown that convention.

4. csswizardry-grids

Responsive CSS grid: csswizardry-grids

This responsive grid system’s approach is to go about designing web layouts mobile first. Similar to the Neat philosophy discussed earlier, if you’re concerned about populating your markup with an overabundance of presentational CSS classes, then you have the option to uses Sass’s @extend feature with csswizardry-grids.

5. Profound Grid

Responsive CSS grid: Profound Grid

One of Profound Grid’s unique features is that it’s precise in rendering your fluid grid layouts in all the browsers it supports. How does this responsive CSS grid system achieve such a feat? By using negative margins to calculate column dimensions.

6. Griddle

Responsive CSS grid: Griddle

Griddle is for web designers and websites that put the focus towards modern browsers. This CSS grid system is generated using Sass functions and mixins. It leverages the powers of CSS inline-block and box-sizing properties, which gives your layouts some new abilities that traditional float-based layouts can’t provide you.

7. Extra Strength Responsive Grids

Responsive CSS grid: Extra Strength Responsive Grids

If you feel that other CSS grid systems are too constraining, if your priority is utmost control over how your responsive layout adapts to the user’s viewing screen, if you care about well-named CSS classes in your markup, you absolutely need to look at Extra Strength Responsive Grids.

8. Proportional Grids

Responsive CSS grid: Proportional Grids

This CSS grid solution solves the problem that often arises when we rescale our layouts; disproportionate sizes of gutters between different viewing situations. Proportional Grids allows you to use fixed units of measurement for your gutters, while still being able to have fluid columns.

9. Dead Simple Grid

Responsive CSS grid: Dead Simple Grid

This CSS grid is a lightweight at only 250 bytes. If you just want an uncomplicated responsive grid and nothing more, and if you care a lot about front-end web performance, this tiny grid framework, which only has two CSS classes, is the ticket to your needs.

10. Responsive Grid System

Responsive CSS grid: Responsive Grid System

The Responsive Grid System affords you a bit more flexibility compared to other CSS grid systems because it gives you the the choice of using any number of columns you need. Say goodbye to restrictively dictatorial 12-column or 16-column grid systems if you go this route.

11. rwdgrid

Responsive CSS grid: rwdgrid

If you’re familiar and comfortable with the most popular grid system out there, 960 Grid System, then rwdgrid — a responsive CSS grid that uses 960 Grid System’s syntax and philosophies — is worth a peak.

12. CSS Smart Grid

Responsive CSS grid: CSS Smart Grid

CSS Smart Grid builds upon the 960 Grid System by using a mobile first, responsive approach to grid layouts. Oh, and it’s only 1.2KB.

13. Gridlock

Responsive CSS grid: Gridlock

Gridlock illustrates a truly mobile first approach to web design by reversing the typical responsive web design media query logic — it doesn’t apply "desktop version" CSS properties to your HTML elements unless they’re needed, thereby possibly improving rendering speed a tad bit on mobile browsers (because the browser doesn’t need to overwrite any style rules aimed at desktop screens).

Responsive CSS Grid System Comparison Table

Site Repo License Contributors* Interested** Docs Twitter Founder
Skeleton GitHub MIT 14 3,797 Skeleton docs @dhg
6,710
Dave Gamache
Neat GitHub MIT 12 910 Neat docs @kaishin
724
Reda Lemeden,
Kyle Fiedler
Simple Grid GitHub Unknown 1 753 Simple Grid docs Uknown ThisIsDallas
csswizardry-grids GitHub Uknown 2 438 csswizardry-grids docs @csswizardry
23,145
Harry Roberts
Profound Grid GitHub WTFPL 1 415 Profound Grid docs @weareprofound
72
Profound
Griddle GitHub MIT 2 266 Griddle docs @necolas
15,293
Nicolas Gallagher
Extra Strength Responsive Grids GitHub Dual: MIT & GPL 2 201 Self documented @johnpolacek
4,188
@tsvensen
234
John Polacek,
Tim Svensen,
Andrew Pulley
Proportional Grids GitHub Unknown 1 155 Proportional Grids docs @mattberridge
898
Matt Berridge
Dead Simple Grid GitHub Free 1 148 Dead Simple Grid docs @mourner
1,073
Vladimir Agafonkin
Responsive Grid System GitHub Creative Commons 1 86 Responsive Grid System docs @graham_r_miller
990
Graham Miller
rwdgrid GitHub WTFPL 2 83 Self documented Unknown Vineeth G S
CSS Smart Grid GitHub BSD 1 64 CSS Smart Grid doc @dryan
2,188
Daniel Ryan
Gridlock GitHub MIT 1 13 Gridlock docs @benplum
264
Ben Plum

* Contributors is the number of people contributing to the open source project on GitHub.

** Interested is the number of Watchers the project’s repository has on GitHub.

What Responsive CSS Grid Do You Use?

Do you use a responsive CSS grid system? Talk about it in the comments!

  • No Twitter Bootstrap love?

  • Twitter Bootstrap is a complete front-end UI framework. It has a fluid grid system as part of the entire package. Bootstrap was mentioned in a post I wrote last week.

  • I see the point. Thanks!

  • Thanks, appreciate the time and effort for creating this.

  • I have just started using foundation 4 @ http://foundation.zurb.com. Creating first responsive layout for redesign of existing customer. Braulio

  • Jozef Dvorsk√Ĺ

    Check out another interesting solution – Percentage-based – also working in Safari, Opera: http://coolumns.creatingo.com/

  • I use Twitter Bootsrap for my website.

  • Lee

    This one is really easy to use, you can stack columns and has all variations for 8 columns. http://www.cssgrid.co/

  • Liz Atlas

    I’ve begun to use Skeleton and love its “bare bones” quality allowing me complete freedom to develop the design while providing me with the responsiveness I need. Also great tutorials available online to help get started.

  • I like lemonade
    http://lemonade.im/

  • This is the best resource I found that covers simple and minimalist grid libraries. Thanks you!

  • James Clench

    Check out paul-browne.github.io/articlr/
    Probably the best grid system I have seen.

  • Thanks for sharing James!

    Here’s a clickable URL of Articlr: http://paul-browne.github.io/articlr/

  • Don

    My word! Articlr is quite good indeed. I read all the documentation because I’ve been down this rodeo before and didn’t want to download it and start using it just to find out I still need to do a lot of work to customize my pages. Something I’ve had to do for several Responsive Systems that ended up having many shortcomings. After downloading Articlr, I have the skeletons for a working site that is a rather complicated structure with overlapping columns, z-indexing of many layers, srolling column content, Scroll-to Divs, dynamic images and dynamic Ajax content updates without page refreshing. It contains a LOT of custom photoshop graphics specific to a fixed width layout structure. Literally weeks or a couple of months work in Photoshop.

    I have a lot of the site working now in Articlr with pixel perfect placement 5 hours after downloading it. Granted, I already had a working static 960px site structure somewhat, but it was not responsive. I was loathing making it responsive because I had nine 960px wide backgrounds that were custom designed in Photoshop as photo collages. Each collage comprised about 8 feathered and merged images. They were very complex backgrounds graphically for each of the 9 content sections. You can do the math here. That’s about 100 images combined for just the BG’s.

    I can attest that the core CSS for the template system did NOT conflict, or shift things around much. It looks almost identical to my static site after about 5 hours fiddling with CSS. And best of all, I can now scale it up and down for mobile use. It will need some more massaging with the mobile CSS, but out of the box it got things darn close to what I had envisioned. The media queries and CSS changes will be relatively easy now.

    I must say that the default offset column structures with this template system is very, very good. The author has thought about a lot of intuitive base design structures with padding, margins and positioning.

    This is the best responsive template system I’ve fiddled with. If the author reads this comment, he or she may want to take one little snippet of advice. You have the wrong information and content at the top of your website that promotes this template. In my opinion you need to think about shifting the bottom example content to the top of the page so it is visible. People want to see a demo first, not read a bunch of text first. I almost didn’t see the stuff at the bottom and was about to bail on your site because it looked like everything that I’ve read before. I almost overlooked the bottom and then I decided to click on one of the links. WALLA! A picture is a thousand words folks. Up top, I would put the pictures and screen captures, or a large image scroller that visually displays what’s at the bottom of your website. People will skip over your site because the people that can use this the most are graphically inclined folks. I’m both. I can program and draw. So, I found my way to the bottom. And, I’m usually one of the first folks to bail on a web authoring site that does not appear to include a working demo near the top of the page and wants to immediately steer you to Github.
    Github is the worst sales tool. The majority of people that post there are a waste of time because their content is incomplete or not updated. You can waste hours testing something and ending up in a dead-end because the content is old or outdated.

    I do think this template is going to work for me. If finishing my site is as easy as the first few hours, I need to send you a tip, or a donation. I have been testing and looking at Responsive frameworks for several weeks now. Most all didn’t work half as good as yours works.

    So far, thank you very, very much. So much thought and insight is inside this framework.

  • Don

    Agree. I wrote a much longer review and post but it was not approved or greenlighted for publishing yesterday. Not going to retype it. Sad, because it was pretty detailed. Check this framework out. I’m working with it today and it is good.

  • I have designed a simple easy and extremely compatible grid system called The Friendliest Grid On Earth. It is truly lightweight and gives you enough to get started right away. It will work on any phone, tablet, desktop or Tv. It will work with or without javascript enabled. It located at http://www.thefriendliestgrid.com. Go ahead, try it out. EVEN a total beginner could follow these simple instructions.

  • Thanks! Cool Article

    Do you really recommend Skeleton, I heard it’s based in jquery
    what if user has disable js in it browser?

  • I recommend Skeleton. It’s easy to use.

    It’s not based on jQuery. If JS is disabled in the browser, Skeleton will not be significantly affected. The only thing that won’t work is the third-party HTML5 shim for IE8 (and below) users if you use its default index.html file.

  • simi bo

    Also FrameworkCode: http://frameworkcode.com/

  • Paul Scott

    Hi,
    Great post Jacob.
    I have always used Bootstrap, however I am looking for a more light weight css grid only alternative.
    Some great options here.

  • Rad

    yes but you can download just the grid alone and customize it as you wish. C

  • hoshang
  • Adam Smith

    Hi,

    Good round up Jacob!

    I’ve just developed a new CSS grid called Manhattan. Its lightweight and uses data-attributes to keep your class markup clean. If your interested in taking a look, you can see it here: http://www.adchsm.me/manhattan/

    Thanks, Adam

  • Looks like a great grid system Adam!

  • adam

    I hope http://responsivecss.net/ also helps..

  • Paul Browne

    If your fed up of grid systems that don’t fit your style ie. 9,12,16 columns. And if your fed up of always wrapping content in a “clearfix” div. Then check out epicGrid

    https://github.com/Paul-Browne/epicGrid

    Use it
    Abuse It

  • Aurovrata

    great review, especially the last table is very instructive. Thank you.