Best way to layout a variable number of resizable child elements inside a parent <div>?

Question

I have a fixed-size parent element that can contain a changing number of child elements, all of which need to be displayed at the same size and with a fixed x/y ratio; and all of which need to be displayed as large as possible, without overflowing the size of the parent element. (Got that?)

It'll be a lot clearer if you look at the jsfiddle I created that behaves the way I want it to:

http://jsfiddle.net/knbbd/15/

The key bit is this function here:

function layout(parent, parentHeight, parentWidth, children, ratio) {
    var totalArea = parentHeight * parentWidth;
    var elements = children.length;
    var height = 0, width = 0, area = 0, cols = 0, rows = 0;
    for (height = parentHeight; height > 0; height--) {
        width = height * ratio;
        area = width * height * elements;
        cols = Math.floor(parentWidth / width);
        rows = Math.ceil(elements / cols);
        if (area <= totalArea && cols * width < parentWidth && rows * height < parentHeight) {
            break;
        }
    }
    $(children).width(width - 10).height(height - 10);
    $(parent).width(parentWidth).height(parentHeight);
}

And it works, but it seems pretty clunky. I keep feeling that there should be a way to do this just in CSS, but CSS layout rules always make my head hurt, and at any rate, I can't wrap my head around what it would be. Or failing that, it seems there ought to be a way to do it that didn't require manually trying a hundred different values before settling on one that works.

Suggestions on how to improve this?

Answer 1

From my research, it doesn't appear that dynamic width/height re-sizing of child elements relative to the parent in order to maintain maximum visibility of child elements is possible without some JavaScript. May need to reword that sentence.

Some ideas.

It seems the child elements could get only so small before they become unusable. Why not determine all the ratios before hand and store them in an array? That would save the calculations of determining the maximum ratio. That's assuming the parent width and height are not dynamic, of course. I made that assumption based on your use of the word "video."

Width   Height  Max Children
189.5   123     2
138.5   89      4
122     78      6
89      56      12
69.5    43      15
63.5    39      20
56      34      24
48.5    29      30

Another option would be to use a CSS grid framework. Here you could re-assign all the child elements with a particular class once a specific number was reached. This maximum number may need to be determine before hand. Or, there may be a simple way to calculate this max number on the fly.

• https://stackoverflow.com/questions/76996/what-is-the-best-css-grid-framework
• http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/
• http://fluidable.com/
• This one has a grid with video ratios: http://www.allapis.com/The-Golden-Grid/golden3.html