Divide a canvas into spaces of same width and height

I want to have a canvas which covers the full page (apart from a top area and a left area) as shown in the image below (blue area).

I want to divide the canvas in squares/rectangles (yellow lines) each one with the same height and width in a way that I can add some fixed size rectangle (green rectangles) in the grid. Well, something similar to Windows 7 Desktop grid (or Windows 8 Metro) in which icons are aligned to the grid.

The way I guessed to implement it is:

• draw the blue Canvas: get page height and width and subtract the grey area
• divide the Canvas in equal dimensions rectangles in a way that when I drag and drop one of the green rectangle into it gets aligned to the grid: no idea here

• drawing and dragging green rectangles (let's call them nodes): I'm going to use appendTo() to add a Div for each rectangle, and using jQuery UI to drag them. This is already done. Here is an example: http://myownlibrary.altervista.org/es4/

• One further step I would take is to make the canvas area extendable,that is, when all the rectangles contain some node, I want the canvas to "grow" in width/height (and it is going to be scrolled using horizontal and vertical scroll bars).