Tiling dynamic-sized images seamlessly in column layout using HTML/CSS

Question

I'm trying to make a responsive/dynamic image grid layout for my portfolio like Artstation has on their front page. Here's where I'm at:

http://jsfiddle.net/gprxzmtc/1/

So the functionality that I would want to have is this:

• seamless rectangular tiles that keep aspect ratio
• 1x1 tiles
• (heightXwidth)
• 2x2 tiles
• 1x2 tiles (ideally)
• 2x1 tiles (ideally)
• 2x3 tiles (ideally)
• number of columns changes to fit container width 100%
• tiles scale uniformly to fit column width 100%
• tiles reorder themselves to cover 100% of the image area

What works:

• adjust number of columns based on window size
• adjust width of images to column width

What doesn't work (properly):

• images tiling seamlessly in column
• ordering the tiles to occupy the least amount of space

Right now my container max width is 960px which makes the 1x1 tile 160x160px, the 2x2 tile 320x320px etc.

HTML

<div class="container">
    <ul class="gallery">
        <li><a href=''><img id='sizeA' src='http://i.imgur.com/OLT53f5.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeA' src='http://i.imgur.com/OLT53f5.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeB' src='http://i.imgur.com/XuJoafB.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeA' src='http://i.imgur.com/OLT53f5.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeA' src='http://i.imgur.com/OLT53f5.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeC' src='http://i.imgur.com/FnVs97u.jpg' style='max-width:320px'></a></li>

        <li><a href=''><img id='sizeD' src='http://i.imgur.com/LUMUsh4.jpg' style='max-width:320px'></a></li>

    </ul>
</div>

CSS

a {
    text-decoration: none;
}

ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

body {
    background: #1c1c1c;
    width: 100%;
    margin: 0;
    border: 0;
    padding: 0;
}

.container {
    background: #101010;
    max-width: 960px;
    height: auto;
    margin: 0 auto;
    padding: 0;
}

.gallery {
    line-height: 0;
    -webkit-column-count: 3;
    -webkit-column-gap:   0px;
    -moz-column-count:    3;
    -moz-column-gap:      0px;
    column-count:         3;
    column-gap:           0px;


    }
    .gallery li {
        margin:  0;
        padding:  0;
        display: inline-block;
    }
    .gallery img {
        height: auto;
        margin:  0;
        padding:  0;
        width:  100%; 
    }
    #sizeA {
        margin-bottom: 0;
        margin-right: 0;
    }
    #sizeB {
        margin-bottom: 0;
        margin-right: 0;
    }
    #sizeC {
        margin-bottom: 0;
        margin-right: 0;
    }
    #sizeD {
        margin-bottom: 0;
        margin-right: 0;
    }
}

@media (max-width: 960px) {
    .gallery {
    -moz-column-count:    3;
    -webkit-column-count: 3;
    column-count:         3;
    }
}

@media (max-width: 640px) {
    .gallery {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
    }
}

@media (max-width: 320px) {
    .gallery {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
    }
}