Figuring out how to make every possible grid layout for your contents perfect is a complex problem which changes depending on your site. I would encourage you to make any improvements to the sliding grid you think are necessary.

Thanks for looking and please let us know how your efforts turn out.

Thanks,
Zack

I resized http://designbycristian.com/ 7 columns down to 2 back to 6, 5, 4, 3. It was not only sexy, but fun. And yet… 3 had warts toward the bottom. Not bad warts. In fact, entirely forgivable warts on most sites. I’d love to have those kind of warts on my site. But up til then I saw perfection. I believed it was possible. It was like a diamond shattering and I realized it was only glass. I was reminded that, oh yeah, there’s code behind this interface and it can’t cope.

That’s when I had the epiphany. Cristian’s wares are handcrafted. His site feels handcrafted. When I hit the warts, it didn’t feel handcrafted. It felt automated. Other sites don’t have the handcrafted feel, so the warts would be more acceptable.

Others already discussed variations like restrict the content to one size and allow re-ordering for better fit. I think a further restriction would allow us to have our cake and eat it too. So… I suggest if you know the cell sizes and order will stay static, you preview and approve the number of columns that fit perfectly. Then you use an array of acceptable widths [2,4,5,6,7].

I really deserve a comment stating my solution also shatters the illusion of perfection because the design doesn’t increment evenly. How come the user never sees 3? Is that a bigger wart? Is it more glaring? Maybe the cure is worse than the disease. Design is always about balancing the trade offs.

So we’re clear, I’m absolutely going to use sliding resizable grid somewhere. It’s a great solution. … Now to find a great problem to use it on.

Thank you for trying the example. You might want to add a timer on the resize event. Every time the window was resized you could wait half a second before you called the alignGrid function again. That would stop it resizing too often.

You also can use this script to get an effect very similar to robclarke.com. The grid supports bigcells as well as normal cells. If you want to have one cell dynamically get larger just set it to have a class of bigcell and call the alignGrid function.

Good luck and please share anything you make.

Anyways, i’d like to make this dynamic so that when you expand a box, it will re-arrange everything like on robclarke.com…

robclarke.com doesn’t have the neat animation though… so this would be awesome.