Easy responsive design using Responsive Grid System

These days there is no excuse not to make your website design responsive, even if you aren’t a CSS guru. The easiest way is to use a fluid grid system with a few media queries to optimise the layout depending on the content. There are plenty to choose from.

I tried out Responsive Grid System from Graham Miller.

It really is super simple to use and lightweight. You can have a different number of columns in different parts of your page. First decide how many columns you want (up to 12). Then simply copy and paste a bit of HTML and CSS, put your content into your HTML and you’re done. It has breakpoints already included which you can change if you wish.

The rest is left up to you, so don’t forget to include the viewport meta tag

<meta name="viewport" content="width=device-width,initial-scale=1">

in your head to make sure the media queries work properly. This is because on many mobile devices one device pixel does not equal one css pixel.