Complex Grid Example

complex grid with CSS

by ernestohs

HTML

<div class="container clearfix">

    <div class="grid1 first">
        grid1
    </div>
    <div class="grid11">
        grid11
    </div>

    <div class="grid2 first">
        grid2
    </div>
    <div class="grid10">
        grid10
    </div>

    <div class="grid3 first">
        grid3
    </div>
    <div class="grid9">
        grid9
    </div>

    <div class="grid4 first">
        grid4
    </div>
    <div class="grid8">
        grid8
    </div>

    <div class="grid5 first">
        grid5
    </div>
    <div class="grid7">
        grid7
    </div>

    <div class="grid6 first">
        grid6
    </div>
    <div class="grid6">
        grid6
    </div>

    <div class="grid3 first">
        grid3
    </div>
    <div class="grid3">
        grid3
    </div>
    <div class="grid1">
        grid1
    </div>
    <div class="grid5">
        grid5
    </div>

    <div class="grid1 first">
        grid1
    </div>
    <div class="grid5">
        grid5
    </div>
    <div class="grid3">
        grid3
    </div>
    <div class="grid3">
        grid3
    </div>

    <div class="grid3 first">
        3
    </div>
    <div class="grid9">
        <div class="grid3 first">3</div>
        <div class="grid3">3</div>
        <div class="grid3">3</div>
        <div class="grid5 first">5</div>
        <div class="grid2">2</div>
        <div class="grid2">2</div>
    </div>

    <div class="grid8 first">
        <div class="grid3 first">3</div>
        <div class="grid3">3</div>
        <div class="grid2">2</div>
        <div class="grid1 first">1</div>
        <div class="grid1">1</div>
        <div class="grid6">6</div>
    </div>
    <div class="grid4">
        4
    </div>
    
</div>

CSS

body {
    font: 12px/140% Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 40px auto;
}
.container {
    width: 978px;
    margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
    float: left;
    display: inline;
    margin-left: 30px;
}
.grid1 {
    width: 54px;
}
.grid2 {
    width: 138px;
}
.grid3 {
    width: 222px;
}
.grid4 {
    width: 306px;
}
.grid5 {
    width: 390px;
}
.grid6 {
    width: 474px;
}
.grid7 {
    width: 558px;
}
.grid8 {
    width: 642px;
}
.grid9 {
    width: 726px;
}
.grid10 {
    width: 810px;
}
.grid11 {
    width: 894px;
}
.first {
    margin-left: 0;
    clear: left;
}

/* clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix {
    zoom: 1;
} /* IE6 */
*:first-child+html .clearfix {
    zoom: 1;
} /* IE7 */

/* NOTE: the following styles are for demo purpose (not required) */
.container {
    background: url(978-grid-bg.png) repeat-y;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
    margin-bottom: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: rgba(255,0,0,.2);
    border: solid 1px #999;
    border-width: 1px 0;
}