Fill a webpage with variable number of squares -fill screen and least empty spaces at the end

Given n number of squares (that must be the same size as each other), I would like to fill a web page with these squares such that it maximises the space of the screen and results in the least number of empty squares at the end. Any ideas? I see something about packing algorithms...

The squares cannot be rotated. They will be represented in html such as:

<div class="row"><span class="square"></span><span class="square"></span><span class="square"></span><span class="square"></span></div>
<div class="row"><span class="square"></span><span class="square"></span><sp开发者_高级运维an class="square"></span><span class="square"></span></div>

css:

.square {
    height: x;
    width: x;
}

If they're square that simplifies the problem quite a bit. There isn't a whole lot of variation you can get out of squares.

If you mean rectangles then yes, 2d bin packing is what you want. Here's an interesting javascript implementation using different sized rectangles: http://incise.org/2d-bin-packing-with-javascript-and-canvas.html Note: this is not an optimal algorithm but pretty good