Working on a project that required us to sort out a grid layout, we were experimenting with what the best methods would be to visually communicate the items on a vertically scrolling grid when resizing the window. Using a little AS3, I managed to code a few mad nerdy little examples. Of course, there isn’t any scrolling in these examples, but you get the point. Check them out here:
1) Left flush no-resize sorting : In this example, everything is flush left, and the grid items do not resize. Visually, it keeps the spacing consistent and everything in order, but leaves some whitespace.
2) Auto justify no-resize sorting : In this example, the grid items space out evenly to fit the screen and also do not resize. Visually, makes a good use of the gutters, but might look kinda funny.
3) Auto resizing, full screen sorting : All the grid items resize horizontally and vertically to fit the width of the screen. Visually, it makes the best use of the gutters, but stretches the images. So I guess this depends what sort of content you’re placing in the items. You may or may not want to stretch them.
4) Left flush no-resize smart sorting : This is the same as #1, but I call it smart, because it keeps the screen looking more filled. Once you resize the browser, you’ll notice that when your window is covering half of an item, it will appear/disappear. This hides some of the item, but gives some padding to make it feel more comfortable.
A lot of times, when you’re immersed in the design/development, you lose sight of the obvious and/or lose sight of what you’re actually trying to achieve. Are there other obvious options? Which method is the best out of these?
Let us know if you find these handy, or if you have any suggestions or comments!
kukejs August 31, 2010 at 1:00 pm
You just saved my life. Thanks man You rock!