Grids for Square Content

Jim Collinson's Avatar

Jim Collinson

31 Jan, 2014 11:05 AM


Glad to finally have a forum dedicated to grids!

To kick off then. Does anyone have any experience, or examples, of grids built around largely square content/images? Album covers for example.

Would be great to see how others have handled it.


  1. Support Staff 1 Posted by Nathan Ford on 03 Feb, 2014 12:06 PM

    Nathan Ford's Avatar

    I have been quite a fan of the method mentioned in this post:

    Basically, you can use padding-top % (which is based on the width, not height, of the page) to keep an apect ratio. So for a square, I believe the padding-top would be 50%.

    The only drawback of this is creating an inner container element.

    Here is a demo I created to play with this:

  2. 2 Posted by Jim Collinson on 03 Feb, 2014 01:37 PM

    Jim Collinson's Avatar

    Actually, I was think more about designing the Grid for square content, rather than the implementation … but I'll definitely bank that tip for future reference. Nifty.

  3. Support Staff 3 Posted by Nathan Ford on 03 Feb, 2014 01:51 PM

    Nathan Ford's Avatar

    Ah, in that case, it really depends on what you want to do with your squares. If it is a grid of even weighting, meaning every album cover (for example) is the same importance, then columns of equal width would be in order. You may try an odd number of columns to help it feel a little more dynamic, and be generous with the gutters, as the album art would need space to breathe. Rdio does a great job with this (first image attached).

    To achieve something more like iTunes cover flow, you could play with ratios for emphasizing the middle columns, as using multiple even columns may make the jumps too drastic. Something like the second image attached, built using the golden ratio.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac