Trouble with CSS Grid Layout/Image positioning

Question

Having some trouble trying to put together a page where images are placed properly. Screen shot attached of what I currently have in place now. What I am trying to get to would look like the first row of images (1-5) all the way down the page with every other row opposite, if that makes sense. Images 1-8 are set up correctly but 9-10 are on row 3 rather than on row 2 where I would like them. Image 11 should be left side and 12-15 should be right side. And so on..

Current css –

    #grid { float: left; width: 100%; overflow: hidden; }
#grid-inner { float: left; width: 890px; overflow: hidden;  }
.item { float: left; margin: 0 0 10px 0; position: relative; }
.item span { display: none; position: absolute; padding: 0 0 0 0; color: #fff; background: transparent url('../images/back-work.png') 0 0 repeat; }
.item span a { color: #fff; display: block; height: 100%; width: 100%; }
.small { width: 210px; height: 125px; }
.large { width: 420px; height: 260px; }
.small span { width: 210px; height: 125px; padding: 0 0 0 0; }
.large span { width: 420px; height: 260px; padding: 0 0 0 0; }
#project { float: left; width: 100%; }
#project-content { float: left; width: 100%; border-top: 1px solid #ccc; margin: 0 0 0 0; padding: 0 0 0 0; }
#project-content-alpha { float: left; width: 200px; }
#project-content-beta { float: left; width: 410px; }
#project-content-gamma { float: right; width: 200px; text-align: right; }
    #project-content-alpha span.light { color: #999; }
#project-images { float: left; width: 100%; }
#project-images img { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination-alpha { float: left; width: 200px; }
#project-pagination-beta { float: right; width: 200px; text-align: right; }

Current markup –

    <div id="grid">
<div id="grid-inner">


<div class="item large">
<span><a href="" title="">ONE</a></span>
<a href="" title="ONE"><img src="" width="420" height="260" alt="ONE" /></a>
</div>



<div class="item small">
<span><a href="" title="">TWO</a></span>
<a href="" title=""><img src="" width="210" height="125" alt="TWO" /></a>
</div>



<div class="item small">
<span><a href="" title="">THREE</a></span>
<a href="" title=""><img src="" width="210" height="125" alt="THREE" /></a>
</div>



<div class="item small">
    <span><a href="" title="">FOUR</a></span>
<a href="" title=""><img src="" width="210" height="125" alt="FOUR" /></a>
</div>



<div class="item small">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="210" height="125" alt="FIVE" /></a>
</div>



    <div class="item small">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="210" height="125" alt="SIX" /></a>
</div>



<div class="item small">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="210" height="125" alt="SEVEN" /></a>
</div>



<div class="item large">
<span><a href="" title=""></a></span>
<a href="" title=""><img src="" width="420" height="260" alt="EIGHT" /></a>
</div>

Any help or suggestions on this would be appreciated. Thanks in advance!

Answer 1

CSS floats don't reposition the elements vertically. They only float horizontally.

If you want vertical "floats" (i.e. tiling), you will need to use JavaScript. I recommend the jQuery Masonry Plugin or Vanilla Masonry (jQuery Masonry minus the jQuery).