html - グリッド レイアウトがあり、2 つの列を結合したい

Question

だから私は列にdivを使用していて、いわば2つの「セル」をマージしたいと考えています。以下に必要なもののレイアウトがあり、下の 2 つの div を 1 つの div にマージしたいと考えています。

画像を投稿できないので、ここに私が欲しいものへのリンクがあります: http://i.stack.imgur.com/ZIgNV.jpg

以下は私のhtmlコードです：

<div class="grid">
    <div class="column">
        <div class="width1 height1 grid_item"></div>
        <div class="width1 height2 grid_item"></div>
        <div class="width1 height1 grid_item"></div>
    </div>
    <div class="column">
        <div class="width1 height2 grid_item"></div>
        <div class="width1 height1 grid_item"></div>
        <div class="width1 height1 grid_item"></div>
    </div>
    <div class="column">
        <div class="width2 height1 grid_item"></div>
        <div class="width2 height2 grid_item"></div>
        <div class="width2 height1 grid_item"></div>
    </div>
    <div class="column">
        <div class="width2 height1 grid_item"></div>
        <div class="width2 height1 grid_item"></div>
        <div class="width2 height1 grid_item"></div>
        <div class="width2 height1 grid_item" style="text-align:right">merge --&gt;</div>
    </div>
    <div class="column">
        <div class="width1 height3 grid_item"></div>
        <div class="width1 height1 grid_item"> &lt;--merge</div>
    </div>  
</div>  

以下は私のcssです：

.height1{
height:160px;

}
.height2{
height:320px;   
}
.height3{
height:484px;   
}
.width1{
width:174px;
}
.width2{
width:213px;
}
.width3{
width:391px;
position:relative;
float:inherit;  
}
.grid_item{
margin:2px;
background-color:green;
}
.column{
position:relative;
float: left;    
}