Создание сетки ящиков с помощью Javascript/CSS

Question

Я создаю сайт для портфолио для своей школы, и у меня уже есть взаимодействие с динамической базой данных с PHP MySQL, но теперь я хочу сделать его немного более привлекательным. Я просто не знаю, как это сделать с моим кодом. Или, если Theres хороший плагин, чтобы использовать, чтобы получить такой результат:

Я действительно хочу, чтобы это окно сетки с изображениями, а когда и наведите курсор мыши на изображение, которое вы можете увидеть название и подзаголовок , также все ящики должны быть одного размера.

Вот код, который я имею прямо сейчас, когда хочу стилизовать его в этой коробке.

<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'); 

});