Generating a Box Grid with Javascript/CSS

Question

Im making a portfolio site for my school and i already got the Dynamic database interaction with PHP MySQL, but now i want to make it a little bit fancier. I just dont know how to do this easily with my code. Or if theres a good plug-in to use to get this kind of result:

I really want to have this box grid with images, and when u hover over a image you can see the title and sub-title, also all of the boxes have to be the same size.

Here's the code i have right now that i want to style into this box grid.

<article>
    <div class="image_small"><?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $image ).'" width="250" height="200" />';?></div>
     <div class="text_small"><h3><?php echo $title?></h3><br>
     <p><?php echo substr($body, 0, $lastspace)?></p>
     </div>
    <div class="vak"><h4>Vak: <?php echo $category?></h4></div>
    <div class="more_button"><?php echo "<a href='post.php?id=$post_id'><img src='images/more-button.png'  width='70' height='30' border='0'></a>"?></div>

   </article>

Answer 1

One method is using JQuery:
Include dependencies
Gridster is currently written as a jQuery plugin, so you need to include it in the head of the document. Download the latest release at jQuery.

HTML Structure
Class names and tags are customizable, gridster only cares about data attributes. Use a structure like this:
<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>

        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
    </ul>
</div>

Grid it up!
Gridster accepts one argument, a hash of with configuration options.
$(function(){ //DOM Ready

    $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140]
    });

});

To get hold of the API object, use the jQuery data method like so:
$(function(){ //DOM Ready

   var gridster = $(".gridster ul").gridster().data('gridster');

});