Flexible thumbnail grid with css

Question

I am trying to position thumbnails across the screen with even "padding". Here is an image illustrating the problem:

page preview

<!DOCTYPE html>
<html>
<head>
<title>Test rows</title>

<style type="text/css">

    body {
        background: #121212;
        color: #fff;
    }

    #Container {
        background: #585858;
        margin: 0 auto;
        min-width: 1024px;
        width: 85%;
        margin-top: 50px;

        text-align: justify;
        -ms-text-justify: distribute-all-lines;
        text-justify: distribute-all-lines;
    }

    #Container a {
        vertical-align: top;
        display: inline-block;
        *display: inline;
        zoom: 1;
    }

    .stretch {
        width: 100%;
        display: inline-block;
        font-size: 0;
        line-height: 0;
    }




</style>
</head>

<body>

<div id="Container">

<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<span class="stretch"></span>

</div>




</body>
</html>

I did some research here in stackoverflow and found some usefull code to start, but I am facing a few problems. I want the images to align from left to right and not "snap" to the boders of the container when I have less images in the last rows as you see the image.

Also I would like to have the "vertical space" between rows to be equal to the horizontal spacing between images, for now I have some vertical spacing like "3px" and I am not sure where is comming from. I am opened to js solutions if needed. Thank you

Just skip the `text-justify: distribute-all-lines;` ? The default behaviour of `text-align: justify;` is to left-align the last line iirc — xec, Dec 16 '13 at 09:56
but that wont distribute the images evenly in the horizontal space as I have in the first row. — user1765661, Dec 16 '13 at 09:59

score 8 · Accepted Answer · edited May 23 '17 at 12:34

8

Would something LIKE THIS work for you?

This is based on an answer supplied here on SO which I would recommend you read, as well as this one- also based around it. This justifies the child elements.

HTML

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <span class="stretch"></span>
</div>

CSS

#container {

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */

}

.box {
    width: 150px;
    height: 125px;
    background:#ccc;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    margin:10px;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

Alternatively, if instead of the child items being justified you wish them to align left to right, have a look at this fiddle, based around this answer on SO

HTML

<div class="container">
   <div>Box1</div>
   <div>Box2</div>
   <div>Box3</div>
   <div>Box4</div>
   <div>Box5</div>
   <div>Box6</div>
   <div>Box7</div>
   <div>Box8</div>
   <div>Box9</div>
   <div>Box10</div>
   <div>Box11</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
.container {
  overflow: auto;
  display: block;
}
.container > div {
  margin: 20px;
  width: 150px;
  height: 100px;
  background: blue;
  float: left;
  color: #fff;
  text-align: center;
}

edited May 23 '17 at 12:34

Community

1
1

answered Dec 16 '13 at 10:03

SW4

69,876
20
132
137

Hey, that code has the same problem of snaping the boxes and not align them from left to right in the last row. Thanks anyway – user1765661 Dec 16 '13 at 10:08
I've also update the answer to include left-to-right alignment as an alternative to justification – SW4 Dec 16 '13 at 10:15
Have a look at the image I posted in the question where there is a red outline with an arrow pointing. In the last rows I want them to fill the "next avaliable space". – user1765661 Dec 16 '13 at 10:16
Thanks, I just saw the update. Well, it works but when I change the width and height of the boxes everything get's messed up. When I change the size of the boxes I need to change something else? Thank you – user1765661 Dec 16 '13 at 10:26
Ok, the alternative you posted in your answer works great. But I need the images to still "stretch" to 100% size of the div container. And with this alternative way I have a lot of free space on the right. The last image/box on the right should be "floated" to the right completly. Not sure if it's possible. – user1765661 Dec 16 '13 at 10:38

score -2 · Answer 2 · answered Dec 16 '13 at 09:58

-2

You dont need the text-align: justify; CSS rule http://jsfiddle.net/2ngCS/

answered Dec 16 '13 at 09:58

Lucky Soni

6,811
3
38
57

I believe OP wants the boxes distributed evenly, see the first line of the question. – xec Dec 16 '13 at 09:59
exactly, I want to evenly distribute the images. – user1765661 Dec 16 '13 at 10:03

Flexible thumbnail grid with css

2 Answers2