Snap container width to width of number of visible thumbnails? - html

Question

See my site here: http://www.element17.com. It may be desirable to change to a different album than the default in order to have more thumbnails available. The Paris album has the most images in it.
If you click the "Show Photo Grid" button in the very bottom-right, you'll see the photo/thumbnail grid I've contrived.
Right now it scales with the viewport, and I'd like it to continue to do so, but instead of smoothly increasing in size with the viewport I'd like it to only be as wide as the number of thumbnails that currently fit in the viewport, so that there's no empty whitespace to the right of the number of displayed thumbnails. I'd like it to remain 20px from the right of the viewport with any empty space being displayed on the left.
How can this be accomplished?
The current code follows:
HTML
<div id="grid_outer">
<div id="grid_inner">
<div class="grid_thumb button">
<span class="thumb_title">TITLE</span>
<img class="thumb_image" src="image.jpg" alt="TITLE">
</div>
<div class="grid_thumb button">
<span class="thumb_title">TITLE2</span>
<img class="thumb_image" src="image2.jpg" alt="TITLE2">
</div>
</div>
</div>
CSS
#grid_outer {display:none; position:absolute; background-color:rgba(0,0,0,0.75); right:20px; left:20px; bottom:60px; padding:20px 10px 10px 20px; border-radius:20px; max-height:480px; overflow:hidden;}
.grid_thumb {position:relative; float:left; margin:0 10px 10px 0; width:150px; height:150px;}
.thumb_image {position:absolute; top:0; left:0; border-radius:5px;}
.thumb_title {position:absolute; bottom:0px; left:0px; z-index:100; padding:8px; background:#000; border-radius:0 5px 0 5px;}
.button {cursor:pointer;}
So I've discovered that if I set the width of #grid_outer to auto, it will behave how I want if there's less than one row of thumbnails, but will stretch to the far left side of the viewport if there is more than one row of items. Can anyone help?

Answer 1

The CSS only solution (http://caniuse.com/#feat=css-sel3, http://caniuse.com/#feat=css-mediaqueries)
http://jsfiddle.net/coma/G7bx8/6/embedded/result/
div.grid {
font-size: 170px;
position: fixed;
max-width: 1em;
height: 3em;
bottom: 20px;
right: 20px;
padding: 5px;
background-color: rgba(0, 0, 0, .75);
border-radius: 20px;
overflow: auto;
}
div.grid:after {
display: block;
content: "";
clear: both;
}
div.grid > div {
width: 160px;
height: 160px;
float: left;
margin: 5px;
border-radius: 10px;
background-color: #009dff;
}
#media screen and (min-width: 410px) {
div.grid {
max-width: 2em;
}
div.grid > nth-child(2n) {
clear: right;
}
}
#media screen and (min-width: 550px) {
div.grid {
max-width: 3em;
}
div.grid > nth-child(3n) {
clear: right;
}
}
#media screen and (min-width: 720px) {
div.grid {
max-width: 4em;
}
div.grid > nth-child(4n) {
clear: right;
}
}
#media screen and (min-width: 890px) {
div.grid {
max-width: 5em;
}
div.grid > nth-child(5n) {
clear: right;
}
}
#media screen and (min-width: 1060px) {
div.grid {
max-width: 6em;
}
div.grid > nth-child(6n) {
clear: right;
}
}
#media screen and (min-width: 1230px) {
div.grid {
max-width: 7em;
}
div.grid > nth-child(7n) {
clear: right;
}
}
#media screen and (min-width: 1400px) {
div.grid {
max-width: 8em;
}
div.grid > nth-child(8n) {
clear: right;
}
}
#media screen and (min-width: 1570px) {
div.grid {
max-width: 9em;
}
div.grid > nth-child(9n) {
clear: right;
}
}
#media screen and (min-width: 1740px) {
div.grid {
max-width: 10em;
}
div.grid > nth-child(10n) {
clear: right;
}
}
The jQuery solution
http://jsfiddle.net/coma/G7bx8/7/embedded/result/
var size = 170;
var margin = 40;
var win = $(window);
var adjust = function() {
$('div.grid').each(function() {
var width = win.width() - margin;
width = Math.floor(width / size) * size;
$(this).width(width);
});
};
win.resize(adjust);
adjust();