Grid layout via list items, need help auto-adjusting heights to match

[cmegown]

Hi everyone, I know my question title isn’t very clear so let me explain:

I’ve got a relatively simple responsive grid system done via an unordered list where each <li> is an individual tile containing a document thumbnail and a document title. Everything is done and everything works as needed, but I’ve got a problem I cannot solve with my fledgling skills in javascript. Some document thumbnails are landscape and some are portrait, and some document titles are long while others are short. This uncertainty can lead to <li> tiles of varying height, which can lead to gaps between tiles and rows in the “grid” system.

What I would like to try to do, is loop through every <li> and grab the height of the tallest one, then apply to all other <li> so that they all match. Also, since this is responsive, I need to continue to check and reapply as the viewport resizes.

Like I said my JS skills are lacking, but where I work this tool would be pretty valuable and would be a good exercise to expand my skills.

Thanks!

[chrisburton]

Why not just use masonry.js?

[cmegown]

Masonry is an option, but (from higher up the chain o’ command) the desired layout is square/even/equal/etc.

I think I could eventually convince them to use masonry, but this is as good an exercise in learning javascript as anything else anyway.

[TheDoc]

No JS needed for what you want to do: http://codepen.io/ggilmore/pen/ae465adffef8a5a6c36b7f9ae1f3a78b

Good ol’ inline-block to the rescue.

[cmegown]

@CrocoDillon Thanks for the snippet! I’ll find some time today to give that a go and report back here with the results.

@TheDoc I tried a layout similar to that from the start, but something I forgot to originally mention is that each tile needs to be entirely clickable/tap-able. Although nicely grid-like and easy, the layout you put together leaves large gaps of dead-space. Thanks though :) you’ve had an answer for pretty much every single question I’ve ever posted on here…keep up the great work!

[TheDoc]

There’s a simple fix to that, but I’m on my phone at the moment. I’ll post it when I get to my desk.

[TheDoc]

I’m not entirely sure where the dead spaces were to begin with, but here’s an example that has links covering the entire box: http://codepen.io/ggilmore/pen/ae465adffef8a5a6c36b7f9ae1f3a78b

[cmegown]

Sorry guys, got moved to a different project for a couple of days there so I had to put all of this on hold.

@CrocoDillon Your solution works perfectly! I had something similar to that, but was missing the height reset. You really saved my bacon today, and I appreciate the help!

@TheDoc Your pen, while not what I needed currently, actually helped me out with a different project of mine. So thank you for that as well!

[Author]

Posts