Mosaic of images HTML/CSS

Mosaic of images with only css and html.

by web tiki

HTML

<div id="wrap">
    <div class="big_col">
        <div class="small_img">
            <img src="http://www.lorempixum.com/328/492/abstract" alt="" />
            <img src="http://www.lorempixum.com/g/328/492" alt="" />
            <img src="http://www.lorempixum.com/g/328/492/sports" alt="" />
            <img src="http://www.lorempixum.com/328/492/nature" alt="" />
        </div>
        <div class="medium_img">
            <img src="http://www.lorempixum.com/g/328/492/business" alt="" />
            <img src="http://www.lorempixum.com/328/492/people" alt="" />
        </div>
        <div class="small_img">
            <img src="http://www.lorempixum.com/g/328/492/food" alt="" />
            <img src="http://www.lorempixum.com/328/492" alt="" />
            <img src="http://www.lorempixum.com/328/492/cats" alt="" />
            <img src="http://www.lorempixum.com/328/492/people" alt="" />
        </div>
    </div>
    <div class="big_col">
        <img src="http://www.lorempixum.com/328/492/nature" alt="" />
    </div>
    <div class="small_col small_img">
        <img src="http://www.lorempixum.com/g/328/492/transport" alt="" />
        <img src="http://www.lorempixum.com/g/328/492/sports" alt="" />
        <img src="http://www.lorempixum.com/328/492/nature" alt="" />
        <img src="http://www.lorempixum.com/g/328/492/sports" alt="" />
    </div>
    <div class="medium_col medium_img">
            <img src="http://www.lorempixum.com/328/492/nightlife" alt="" />
            <img src="http://www.lorempixum.com/g/328/492/transport" alt="" />
    </div>
    <div class="small_col small_img">
            <img src="http://www.lorempixum.com/328/492/fashion" alt="" />
            <img src="http://www.lorempixum.com/328/492/nature" alt="" />
            <img src="http://www.lorempixum.com/g/328/492/sports" alt="" />
            <img src="http://www.lorempixum.com/328/492" alt="" />
    </div>
</div>

CSS

body, html {
    width:100%;
    margin:0;
    padding:0;
}
#wrap {
    width:984px;
    height:492px;
}
.big_col, .medium_col, .small_col{
    height:492px;
    float:left;
}
img {
    display:block;
    margin:0;
    padding:0;
    border:none;
    float:left;
}
.big_col {
    width:328px;
}
.medium_col{
    width:164px;
}
.small_col{
    width:82px;
}
.big_img img {
    width:328px;
    height:492px
}
.medium_img img {
    width:164px;
    height:246px;
}
.small_img img {
    width:82px;
    height:123px;
}