This is a working-out of an idea I’ve had. I can’t think of any solution for it, besides perhaps a script, so I’m going to invent a CSS attribute.
Fluid Layouts
I’m a proponent of fluid layouts, and so I believe that a page with a large number of congruous containers is best laid out by floating the containers. This means they fit as many as they can on one line, and then wrap the rest to the next line. Someone with a small screen might see one or two items per row, while someone with a larger screen will see more. (The Embroidery House has a good example of this.)
Notice the empty bit on the right? Try resizing your browser and watch how the flow works.
Design Problem
There’s one serious design problem with this: If the width of the screen isn’t exactly the right width to contain a specific number of floated items, there’s going to be a gap to the side, up to the size of an item.
Solution
So, my idea is this: Add expand:x|y|both to the CSS. The renderer would take the active area to the side (the blank spot, minus padding and margins), and divide that, rounding down, into the number of floats. It would increase the width|height|both of each float by that amount, which would fill up the sides, minus a pixel or two for rounding errors.
No matter the width of the window, the items will fill their container.
Technical
If the window grows wide enough to fit another item, the items will snap back to their original size and will be reflowed.
That is, the parser first checks the width of the floats (it would have to keep current width separate from the ‘real’ width), and flows from there, and then alters the width to fill the rest of the container.
For the purposes of Webkit: the attribute would not accept -webkit-transition, because doing a regular width transition on the parent container would re-flow and re-expand the floats.
Problems
I see the following potential problems.
- That rounding error sounds tricky. If it rounded up, the floats might wrap, which is why I was saying it would round down.
- I obviously haven’t given the rendering flow much thought. I’d have to hear from an expert how that could fit into it.
- Could it keep a size separate from it’s regular size? I suppose its size could be recalculated based on how float sizes are usually calculated.
I’d like to hear your opinions on this issue.