Problem: equal height rows for responsive sites

Problem:

Keeping rows at equal heights when the viewport changes and blocks shift to new rows.

Requirements:

  • Blocks of content must appear in a grid.
  • The amount of blocks to a row needs to change according to the device width.
  • The rows need to be equal heights.
  • The blocks must be dynamic height (no max-height).
  • The code and performance must be optimised for mobile.

Landscape Example

Portrait Example

 

Some ideas:

  1. Wrap every three elements and use the window resize event to change the wrap from 3 items to 2 using JavaScript.
  2. Duplicate the markup and show / hide each one using just CSS media queries.
  3. Don’t wrap the elements and use JavaScript’s windows resize event to match the heights of every group of 2 or 3  blocks.

What is the most efficient way of meeting these requirements using HTML / CSS / JavaScript?

Answers on a post code (or below or Twitter @joeyrabbitt).

Edit:

The team that encountered this problem eventually went for option 1 because it was the least memory intensive. It wasn’t favourable to have heavily duplicated markup on the page, so option 2 was ruled out. Option 3 was similar to option 1 in the way that it required JavaScript to loop through elements, but it was less intensive on to re-wrap elements as opposed to calculating individual heights and applying new inline styles to relevant items.

 

 
July 12, 2012
Categories:
Development, UI Design
Tags:
  • Andy Howell

    I’ve only done one responsive site and that was a pain as it had divs stretching over multiple rows. Just using a normal grid it’s fairly easy to to. Twitter Bootstrap is pretty good (not used it but it looks pretty good) as a starting point to look at but there’s some quite handy grid generators out there - 
    http://www.gridsystemgenerator.com/gs01.php

    • Joey Rabbitt

      Thanks Andy. The problem is getting the rows to be equal heights. I can
      target the device width using CSS media quiries but there’s nothing in
      the CSS which would equal out the heights of the rows without modifying
      the markup to my knowledge.

  • http://twitter.com/saulhardman Saul Hardman

    I’d go for method 3 with a twist: perhaps use display: inline-block; on each element and remove all white space between the elements in the html (might not be necessary with height setting). Instead of listening for the window resize event, listen for window orientation change if you’re just focusing on mobile devices, but always check window.orientation for an actual change (android FTL).

  • Andy Howell

    There’s a good CSS trick for equal height columns that I’ve outlined here - 
    http://stackoverflow.com/questions/11103037/is-it-possible-to-make-my-css-columns-appear-equal-in-height/11103297#11103297

  • mikedidthis

    I am doing something similar for a new theme. I never know how many items will be on a ‘row’ and the content is all dynamic.

    Ended up going with Chris Coyiers solution: http://css-tricks.com/equal-height-blocks-in-rows/

    View the demo for a responsive example. I am pretty sure $(window).resize includes rotation, but you can also bind .orientation and fire the function again.

Joey Rabbitt