I've built many responsive layouts in the last couple years and my achilles' heel has always been a fluid grid of (n) squares, or anything with a fixed aspect ratio.
Say you want a grid of movie posters to all line up evenly. You could start with setting up the x-axis:
.grid-item {
float: left;
width: 25%;
}This works great if you can trust the height of the content to remain consitent. Lately, I've been working with images from many sources so consistency with aspect ratio is not an option. My first experiments revolved around the height attribute:
.grid-item {
float: left;
width: 25%;
height: 25%;
}Unfortunately, height has no relation to width but is instead based on the height of it's container. At this point I resorted to JS which felt really dirty:
$(window).resize(function() {
$('.grid-item').each(function() {
var width = $(this).width();
$(this).height(width);
// I hate that I just did this
});
});Ok, so what other options do we have?
Padding is based on the width of it's container. So if we set padding-bottom equal to our width we would get a flexible square.
.grid-item {
float: left;
width: 25%;
padding-bottom: 25%;
}This technique has been staring me in the face for a while now and I'm stoked to start using it. Try out the example below or let me know why you think this is a horrible idea.