How to stop layouts breaking when columns have differing heights

[sm9]

Hi there,

I keep coming up against an issue with Unsemantic (and in 960.gs before that) where columns of differing heights would cause the layout to break. So I'm just posting to ask about the best way of dealing with this.

Here's a screenshot of what I'm talking about: http://cl.ly/image/0s222r1Y0a3Z Here, you can see that as the 'Web Design' column has more content than the other columns, it causes the 'PPC' column to drop down a row, so breaking the layout.

Here's the code I'm using for these columns (where the grid-33 div is repeated for however many pieces of content there are in the CMS):

<section class="grid-100 grid-parent">

  <div class="grid-33 tablet-grid-50">
    <h2><a href="#">Title goes here</a></h2>
    <p>Content goes here.</p>
    <a href="#">Find out more &raquo;</a>
  </div><!-- grid-25 -->

</section><!-- grid-100 -->

At the moment, my workaround has been to inject a clearing div after every 3 columns to stop this from happening. Here's a screenshot of the result: http://cl.ly/image/1t1B2I3z0f04

This workaround worked fine when using 960.gs (albeit, it felt a little hacky), but now I'm using Unsemantic, it doesn't work as well. This is due to the responsive breakpoints, where the desktop, tablet and mobile layouts can show different numbers of columns per row, so the injected clearing div can't always be in the correct place.

For example, if you're using say, 2 columns for tablet and 3 columns for desktop, then fixing this issue using the above method for desktop will break it for tablet, as the clearing div is appearing in the wrong place. See this screenshot of the tablet view: http://cl.ly/image/3z0S07193P2z.

So I'd appreciate any advice on the best way of dealing with this.

Thanks,

Stephen

[nathansmith]

Stephen:

I've run into that myself, and have solved it like this. I agree, it feels hacky.

But, it's certainly better than <div class="row"> around everything, since the concept of a "row" is irrelevant when it comes to responsive design.

<div class="grid-container">

  <div class="grid-33 tablet-grid-50">...</div>

  <div class="grid-33 tablet-grid-50">...</div>

  <span class="clear hide-on-desktop"></span>

  <div class="grid-33 tablet-grid-50">...</div>

  <span class="clear hide-on-tablet"></span>

  <div class="grid-33 tablet-grid-50">...</div>

  <span class="clear hide-on-desktop"></span>

  <div class="grid-33 tablet-grid-50">...</div>

  <div class="grid-33 tablet-grid-50">...</div>

</div>
<!-- /.grid-container -->

[sm9]

Hi Nathan,

Thanks for your reply. It never occurred to me to use the 'hide' classes, but this does the trick perfectly, thanks.

I'd imagine that this is the type of issue that affects all grid frameworks actually. So whilst it might feel a bit hacky, I'd rather deal with it like this in the CSS than use something like JS to take care of it.

Thanks,

Stephen

[nathansmith]

I had considered doing something like…

.grid-50 + .grid-50 + * {
  clear: left;
}

But, that could get out of hand quickly…

.grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + .grid-5 + * {
  clear: left;
}

Plus, there's no guarantee that the sibling of a grid unit would itself be a grid unit, because someone could have a custom element dispersed amongst the grid units.

Anyway, I know the clearing <div> isn't ideal. But it still gets the job done, without resorting to a "row" (that cannot be turned off/on as easily).

[sm9]

Yes, using the hide classes definitely seems like the most reliable way of dealing with this. Thanks Nathan.

[kidequinox]

good info, thanks guys.