I got a weird layout I'm trying to fit into Montezuma, so I'm hoping to brainstorm some ways to pull this off.

The design uses 3 columns for a sidebar, and 9 for the loop:

The problem is that on the desktop view, the loop has two columns of posts (columns 4-12 on the picture above). And since 9 is not divisible by two, I'm scratching my head a little.

One of the ideas was to create an additional 2-colum custom grid, most likely percentage-based, and fit it inside the 9-column area. Then I could assign that to the desktop viewport alone.

But even with that solution, how do I float odd posts to the left and even to the right? (I checked the code and there are no odd/even classes applied to the post containers)

Any ideas?

why not make the sidebar 4 or 2 columns?

You don't need to make a new grid, just use CSS to tile your posts. The basic CSS would be something like this:

.blog .hentry {
  width: 49%;
  float: left;
}
.blog .hentry:nth-child(odd)
{
  clear: both;
  margin-right: 2%;
}

@media only screen and (max-width: 480px) {
   .blog .hentry {
     width: 100%;
     float: none;
   }
}

The first rule sets the post entries to 49% wide, so it takes up half the space of the content div (I didn't make it 50% because I wanted to add a margin of 2% to the right of the left-hand posts). The second rule uses the odd keyword to make sure the posts on the left "clear" from the row above it, and adds a margin for spacing from the post next to it. The last rule resets the width to 100% around a cell phone size, so the posts aren't tiled anymore.

There's a demo page here.

Originally Posted by juggledad

why not make the sidebar 4 or 2 columns?

I would but that's not what the client approved

Originally Posted by CrouchingBruin

You don't need to make a new grid, just use CSS to tile your posts. The basic CSS would be something like this...

Awesome. I modified that somewhat to keep the images from bursting from their containers, and set the min-height for the containers themselves, so they line up nicely side-by-side. Lookin' great!

Thank you =)