This Site is Gridiculous

Download Fork on GitHub More Demos

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 Taxi Heathrow 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.

Gridiculous for WordPress now available

The Default Grid

2 Columns

3 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 Taxi Gatwick to London 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.