This Site is Gridiculous

A fully responsive grid boilerplate

Gridiculous was created after I tried out a bunch of different responsive grids and realized that none of them offered all of the features I required. First and foremost, I wanted to make sure that the grid would work from a large desktop monitor through to a tablet and all the way down to a mobile phone. That's why Gridiculous starts off at 1200px and works itself down to 320px. I also wanted the ability to not be locked into always having to start with 1200px, so I created some stops along the way. You can set your site to max out at 960px, 640px, 320px or even stretch it out to full width. You can even space out your columns, create nested columns all the while making sure your images and videos remain fully responsive no matter what screen size. Check out Gridiculous to see how easily you can create a fully responsive grid layout for your next website.

The Default Grid

2 Columns
2 Columns
2 Columns
2 Columns
2 Columns
2 Columns
3 Columns
3 Columns
3 Columns
3 Columns
4 Columns
4 Columns
4 Columns
5 Columns
2 Columns
5 Columns
3 Columns
6 Columns
3 Columns

Using the Grid

Start things off with a tag that uses the "grid" class. I'm going to use a div for the example but it could be any tag you want:
<div class="grid">

</div>
You can also use one of the following width classes if you don't want to rely on the default max width of 1200px.
  • w960
  • w640
  • w320
  • wfull
Next, add another container with the "row" class. I'll include one of the width classes in the main "grid" container so you can see what it would look like.
<div class="grid w960">
	<div class="row">

	</div>
</div>
Now we can start putting together our grid. I want to create 8 columns for my main content and 4 columns for my sidebar. Adding the "end" class isn't a must though it does create a smooth right alignment edge to the row:
<div class="grid w960">
	<div class="row">
		<div class="c12"></div>
	</div>

	<div class="row">
		<div class="c8"></div>
		<div class="c4 end"></div>
	</div>

	<div class="row">
		<div class="c12"></div>
	</div>
</div>
The grid now looks like this:
Header - 12 Columns
Main Content - 8 Columns
Sidebar - 4 Columns
Footer - 12 Columns

Example with Images

All images placed within the grid will respond as the browser window shrinks. Test it out on the example below. The two images in the sidebar are nested so they will become one column when the browser width hits 960px.

Image from http://placekitten.com/
Image from http://placekitten.com/
Image from http://placekitten.com/