Skip to content

Icon View Style Grid Layout?

Turbogears For a couple of projects now, I've wanted a grid layout engine that is similar to how desktops display lists of icons: nearly fixed width items, but varying slightly in height, displayed on a variable width page, so your layout could end up with 1 column or 8 depending on the width of the browser window. Tables are no good because they're always a fixed number of columns. Div elements using float works, so long as you make all the elements a fixed width, but they also have to be the same height, or you'll end up with gaps. I'm thinking it's going to have to be javascript driven including redrawing when the page size changes, and to manually size all items to the tallest item in the row, but I can't seem to find an example on the web anywhere (or my Google foo is weak).

Dear lazy web, can you point me in the right direction?

Trackbacks

No Trackbacks

Comments

Display comments as Linear | Threaded

Anonymous on :

Reply to an old post, but since it's at the top of a Google search for "grid layout engines"...

This look is similar to View/Tiles or View/Icons in Win. Explorer. Cannot ensure every element has the same height however, so bordered items may look odd... those looking for such abilities must use JS and a table.

...

.grid .grid-item {
display: inline-block;
vertical-align: top;
}

...

Firefox 3+ or IE6+ only. Firefox 2 equivalent at:
http://pornel.net/firefoxhack

Add Comment

Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

Form options