Responsive Playground: Fun with the Responsive Grid System

Match the Height

It's the differences between us that make life beautiful, but some days you just want things to all look the same. Here's how you make all of the divs in a row the same height, you power-crazed despot. You can probably give them all the same haircut too...

Veniam, quis nostrud execi. Lorem ipsum dolr sit amet, consectur adipiscing elit, diam nonmum nibhdfer eusimod tincindunut ut laoreet dolore magna aliquam srat vojlutpat. Ut wisi enidiam nonmummy nibh eusimod tincindunut u veniam, quis nostrud execi.consectur adipiscing elit diam nonmummy nibh eusimod. Vulpataedolr sit amet, consectur lature adipiscing elit, se diam nonmummy nibh eusimod tincindunut ut laoreet dolore magna aliquam srat vojlutpat. Ut wisi enidiam nonmummy nibh.

How'd You Do That?

I used jQuery matchHeight - a lovely plugin that matches the heights of elements in the same row.

Just put matchheight into the elements you want to match the height of, then call the jquery.matchHeight-min.js file, and hook it up to the page. I like to put the JavaScript at the bottom of the page, then it won't delay the content from loading.

The HTML

<div class="section group">
	<div class="col span_1_of_4 matchheight">
	
	</div>
	<div class="col span_1_of_4 matchheight">
	
	</div>
	<div class="col span_1_of_4 matchheight">
	
	</div>
	<div class="col span_1_of_4 matchheight">
	
	</div>
</div>

The JavaScript

<script src="/js/jquery.matchHeight-min.js"></script>

<script type="text/javascript">
jQuery(function($){
    $('.matchheight').matchHeight();
});
</script>

Push It

What if you want to leave one of the columns empty on a desktop view, but not have a big blank space when viewed on a mobile?

What's the Secret?

Add a push class to your HTML, then in the CSS add the code as shown. At a normal view the visibility: hidden; means it's invisible, but still fills out its own space (like a bad fart), but when the columns are stacked the display: none; takes it out entirely. And you can breathe again.

The HTML

<div class="section group">
	<div class="col span_1_of_4">
	
	</div>
	<div class="col span_1_of_4 push">
	
	</div>
	<div class="col span_1_of_4">
	
	</div>
	<div class="col span_1_of_4">
	
	</div>
</div>

The CSS

.push {
    visibility: hidden;
}

@media only screen and (max-width: 480px)
{
		
	.push {
	    display: none;
	}
	
}

Divide and Conquer

Let's say you're pulling items from a database, and you might have lots of similar sized divs in the same section but you can't add in the code to break them out into new horizontal rows. Stop pulling your hair out and take a look at this:

1 of 4

The Lowdown

Some nth-child jiggery-pokery removes the left margin and puts every fourth div after the first one into a new row.

The HTML


<div class="section group">
	<div class="col span_1_of_4">
	
	</div>
	<div class="col span_1_of_4">
	
	</div>
	<div class="col span_1_of_4">
	
	</div>
	<div class="col span_1_of_4">
	
	</div>
	<div class="col span_1_of_4">
	
	</div>
	<div class="col span_1_of_4">
	
	</div>
	<div class="col span_1_of_4">
	
	</div>
	<div class="col span_1_of_4">
	
	</div>
</div>

The CSS

As well as the usual Responsive Grid System code you'll need to add in


.span_1_of_4:nth-child(4n+1) { 
	clear:left; 
	margin-left: 0;
	}

If you've got three equal columns (rather than the four in this example) you'll need


.span_1_of_3:nth-child(3n+1) { 
	clear:both; 
	margin-left: 0;
	}

and so on...

Responsive Playground

Fun with the Responsive Grid System

Match the Height

How'd You Do That?

The HTML

The JavaScript

Push It

What's the Secret?

The HTML

The CSS

Divide and Conquer

The Lowdown

The HTML

The CSS

Want Me to Do It For You?

Get in Touch