3

I want to make a layout that consists of 3 columns. The 3 columns are made up of divs that each contain an image of variable aspect ratio. I want to stack these multiple-height divs in the 3 columns in such a way that the gap (margin) between them is equal vertically and horizontally. There should be no margin/padding on the outside; i.e. the 3 columns should span the 100% of the container.

Here is an example:

enter image description here

On a smaller screen I would have the 3 columns collapse into just 1 and have all the divs vertically stacked.

In my fiddle we can see I have used column-count to have the 3 columns. My problem is setting the column-width and margin-bottom to be a consistent value where they create the same gap: 1.5% of the container width.

Here is the CSS I used. .container houses the many .tile divs which in turn each hold an image of unknown dimensions. The number of child divs is also unknown.

.container {
    width:100%;
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count: 3;
    column-gap: 1.5%;
    -moz-column-gap: 1.5%;
    -webkit-column-gap: 1.5%;
    border:1px black solid;
}
.tile {
    margin-bottom:9%;
}
.tile img {
    width:100%;
    height: auto;
    display:block;
}

The HTML:

<div class="container">
    <div class="tile">
        <img src="http://placekitten.com/g/100/200" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/130" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/200" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/200" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/125" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/50" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/150" alt="" />
    </div>
</div>

How do I set the spacing between each div (both horizontally and vertically) to be a fluid value?

TylerH
  • 20,799
  • 66
  • 75
  • 101
harryg
  • 23,311
  • 45
  • 125
  • 198
  • Have you considered using bootstrap for this? [HERE](http://getbootstrap.com/css/#grid) – Luke May 10 '14 at 16:49
  • Wait are you saying you want gap to set space between the single-col version and the edges? Gap won't do that for you. – Erik Reppen Sep 05 '14 at 14:30
  • Perhaps not answer-worthy but I ended up using [JQuery Masonry](http://masonry.desandro.com/) for this problem. Yes, it uses jquery/js instead of pure css but it's pretty lightweight and works well. – harryg Oct 30 '14 at 11:11

0 Answers0