How to create customizable, dynamic grid layout using CSS and JavaScript?

Question

I am working on a project that involves a lot of CSS. The customer wants to have a grid layout on the home page where he wants to be able to rearrange UI components with drag and drop. These UI components could be of different sizes: 1x1, 2x2 and 3x3. When I drop an UI item at the desired new location it should push the other components aside. Any possible holes should be filled with 1x1 components.

How it should work

1. Before I have draged a component
2. Draging the 2x2 component
3. Dropping the component in the middle, the two 1x1 components make room and adapt around the 2x2

Note that the size of the grid is not limited to 8 1x1, but the height as well as the width of it should be possible to expand and make smaller.

I’ll rather not use tables but other than that I am open to suggestions. Right now I've just used inline-block divs which I can drag and drop to switch the jQuery DOM objects. The effect isn't quite what the customer wants: How it is now

Answer 1

I've made a lot dynamic layouts with the same idea. You need to think more in how your float behavior from block to block is stopping for the next following blocks, so they become correct repositioned like you want. So to define a float-stop element is necessary. Your blocks will work with float:left maybe float:right. At some point you will figure out that this behavior has to stop somewhere best done with CSS

.floatstop {
     clear: both; //the important code here..
     width: 100%;
     height: 1px;
     line-height: 1px;
     margin-top:-1px;
}

and Html

<div class="floatstop"></div> 

Made of all blocks who need border to the next block on the left side (maybe right side too) you have to define a base layout which has space for the very right placed block too with borderspace for it, otherwise it would float down under the block before.

But there is a more modern way! You can use CSS3 codes to define your layout.

.columnblock {
     width: 100%;
     column-gap: 30px;
     // for symmetric columned layouts use..
     column-count: 3; 
     // or for not symmetric layouts use..
     column-width: 280px;
}

<div class="columnblock">
    <p>Lorem Ipsum</p>
    <p>another Paragraph</p>
</div>

There other things to mention here but you can read about http://www.w3schools.com/css3/css3_multiple_columns.asp