I've been having a hard time creating an image gallery that adjusts its size automatically (width: 100%) based on the number of items it contains.
For example, take a look at this gallery: http://codepen.io/anon/pen/eNMOEz
.item {
width: 75px;
height: 75px;
border-width: 1px;
float: left;
}
As you resize the browser window, more items are added to each row due to float: left property.
However, the gallery ends up with empty space on the right side of the page because each .item is fixed at 75px.
What I am aiming for is something like this: http://codepen.io/anon/pen/xGWKaP
.item {
width: 5%;
float: left;
}
In this version, as you can see, the items in each row adjust perfectly to the width of the page since their width is defined as a percentage rather than a fixed pixel value. However, there are two issues that need to be addressed:
The number of items per row is fixed (20 in the example). I want the item count to be calculated dynamically based on how many can fit within the available width. For instance, if each item is 75 pixels wide and the page width is 800 pixels, then the item count should be 10 (as 750 pixels is the maximum width that can be covered by 800 pixels.) So it should be
width: 10%There is extra space at the bottom of each row, and I'm not sure what is causing this.
I prefer a CSS-only solution but would also consider a clever JavaScript solution that doesn't cause any glitches.
I know this is a lengthy post, but I hope everything is clear now.