photo grid

by Soviut

HTML

<ul>
    <li class="a">A</li><li class="b">B</li><li class="c">C</li><li class="d">D</li><li class="e">E</li><li class="f">F</li><li class="a">A</li><li class="b">B</li><li class="c">C</li><li class="d">D</li><li class="e">E</li><li class="f">F</li>
</ul>

CSS

ul {
    display: block;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    height: 300px;

    background: #EEE;
    list-style: outside none;
    white-space: nowrap;
    overflow: visible;
}

li {
    position: relative;
    display: block;
    float: left;
}

.a {
    height: 66.6666%;
    width: 300px;
    background: red;
}

.b {
    height: 33.3333%;
    width: 150px;
    top: 66.6666%;
    margin-left: -300px;
    background: green;
}

.c {
    height: 33.3333%;
    width: 150px;
    top: 66.6666%;
    margin-left: -150px;
    background: blue;
}

.d {
    height: 100%;
    width: 200px;
    top: 0;
    background: purple;
}

.e {
    height: 33.3333%;
    width: 150px;
    background: cornflowerblue;
}

.f {
    height: 66.6666%;
    width: 150px;
    top: 33.3333%;
    margin-left: -150px;
    background: orange;
}