The Best Responsive Grid System

I’ve been using various grid systems over the years, mostly for the custom WordPress themes. I was always looking for simplicity and wanted to use as less code as possible so the pages could be rendered quickly and without any delays. Good performance/usability + awesome design = Success! The only CSS grid I can recommend is Responsive Grid System made by Graham Miller from the UK. It’s lightweight, simple to use, there’s no need to hack in any offsets and no need for .last or .end class for the last column.

As any other grid system, it’s responsive and scales to any width, but you can use unlimited number of columns. Let me show you how easy it is!

3 columns example

<div class="section group">
	<div class="col span_1_of_3">
	Column 1
	</div>
	<div class="col span_1_of_3">
	Column 2
	</div>
	<div class="col span_1_of_3">
	Column 3
	</div>
</div>

Column 1

Column 2

Column 3

And the best part is that no math is required! Simply divide your page into sections, add top/bottom section margins, add the columns and you’re all set. If you want to have a different widths in one section, then for instance you can use span_2_of_3 + span_1_of_3 which would make your first column wider enough to fit all the content.

2 + 1 column

<div class="section group">
	<div class="col span_2_of_3">
	Column 1
	</div>
	<div class="col span_1_of_3">
	Column 2
	</div>

</div>

Column 1

Column 2

To grab the Responsive Grid System code, go here responsivegridsystem.com and use the calculator. You don’t have to have all 12 columns in your CSS file, just use those you really need. In that way you’ll minimize the code. If you want to use it for WordPress, there’s a plugin that utilizes the grid code, check it out on WP Plugin Directory.