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

You can just look at it as a grid. More markup, but reusable and responsive too. For the example, you can handle this grid layout with a single class that takes the half of it's container.

first row : - 1 column of 1/2 : has 1 large image - 1 column of 1/2 : has 4 columns (1/2 each, and each containing a small image)

Second row : just reverse the first 1/2 columns

Columns are floated, so the col 4 and 5 will stack under 1 and 2... Your images, have to be at the right aspect ratio too.

And finally, since you're floating elements, clearfix the group.

Hope it helps.

/* Micro clearfix for the wrapper */
.wrap:before,
.wrap:after { 
    content: '';
    display: table
}
.wrap:after { 
     clear: both;
}
.wrap { width:650px; }
/* no need for size if you put the right images */
img { 
    width:100%;
    height: auto;
    vertical-align: middle; /* removes the gap beneth the image */
}
/* you can go further and create some other columns */
.col-1-2 {  
    float: left;
    width: 50%;
}
/* demo purpose only */
img { 
    width: 100%;
    height: 100px;
}
img.lg { height: 200px; }
   

<div class="wrap">
    <!-- one half of the wrapper -->
    <div class="col-1-2">
        <img class="lg" src="" alt="1" />
    </div>
    <!-- one half of the wrapper -->
    <div class="col-1-2">            
        <!-- one half of the columns :: 1/4 -->
        <div class="col-1-2">            
            <img class="" src="" alt="2" />
        </div>
        <div class="col-1-2">            
            <img class="" src="" alt="3" />
        </div>
        <div class="col-1-2">            
            <img class="" src="" alt="4" />
        </div>
        <div class="col-1-2">            
            <img class="" src="" alt="5" />
        </div>
    </div>

    <!-- then reverse -->
    <div class="col-1-2">
        <div class="col-1-2">            
            <img class="" src="" alt="6" />
        </div>
        <div class="col-1-2">            
            <img class="" src="" alt="7" />
        </div>
        <div class="col-1-2">            
            <img class="" src="" alt="8" />
        </div>
        <div class="col-1-2">            
            <img class="" src="" alt="9" />
        </div>
    </div>            
    <div class="col-1-2">
        <img class="lg" src="" alt="10" />
    </div>      
</div>

Answer 2

A better way would be like this - http://jsfiddle.net/rxLTG/2/

HTML

<div class="wrap">
  <img class="lg" src="" alt="1" />
  <img class="sm" src="" alt="2" />
  <img class="sm" src="" alt="3" />
  <img class="sm" src="" alt="4" />
  <img class="sm" src="" alt="5" />
  <img class="lg2" src="" alt="6" />
  <img class="sm" src="" alt="7" />
  <img class="sm" src="" alt="8" />
  <img class="sm" src="" alt="9" />
  <img class="sm" src="" alt="10" />
  <img class="lg" src="" alt="11" />
  <img class="sm" src="" alt="12" />
  <img class="sm" src="" alt="13" />
  <img class="sm" src="" alt="14" />
  <img class="sm" src="" alt="15" />
  <img class="lg2" src="" alt="16" />
  <img class="sm" src="" alt="17" />
  <img class="sm" src="" alt="18" />
  <img class="sm" src="" alt="19" />
  <img class="sm" src="" alt="20" />
</div>

CSS

.wrap {width:500px;}
.wrap img {float:left; width:125px; height:100px;}
.wrap img.lg {width:250px; height:200px;}
.wrap img.lg2 {width:250px; height:200px;float:right;}​

Theres no need to define each row inside a div, because they will automatically fit and wrap round.

Also, if you float the large image on each row first (left or right), then the other four will fit into place without any javascript needed.

Every fifth number will then be a large image, (1,6,11,16,21 etc). If you want it to work javascript free, then use this solution. If you want to keep your original numbering system, then use the solution above.

Answer 3

Check out the interface here. Let me know if you need revisions.

EXACTLY WHAT WAS ASKED FOR - http://jsfiddle.net/rxLTG/

HTML

<div class="wrap">
    <div class="row">
        <img class="lg" src="" alt="1" />
        <img class="sm" src="" alt="2" />
        <img class="sm" src="" alt="3" />
        <img class="sm" src="" alt="4" />
        <img class="sm" src="" alt="5" />
    </div>
    <div class="row">
        <img class="sm" src="" alt="6" />
        <img class="sm" src="" alt="7" />
        <img class="lg" src="" alt="8" />
        <img class="sm" src="" alt="9" />
        <img class="sm" src="" alt="10" />
    </div>
</div>

CSS

.wrap {width:650px;}
.wrap img {float:left; width:150px; height:100px;}
.wrap img.lg {width:350px; height:200px;}
.row.odd .lg, .row:nth-child(even) .lg {float:right;}​

JS

$(function () {
    $('.row:odd').addClass('odd');​
});

Answer 4

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).