使用Javascript/CSS生成长方体网格

我正在为我的学校制作一个公文包网站，我已经获得了与PHPMYSQL的动态数据库交互，但现在我想让它变得更漂亮一点。我只是不知道如何用我的代码轻松做到这一点。或者，如果有一个好的插件可用于获得这种结果：

我真的很想让这个框与图像网格，当你悬停在一个图像上，你可以看到标题和子标题，而且所有的框必须是相同的大小

下面是我现在拥有的代码，我想在这个方框网格中设置样式

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

“？>

一种方法是使用JQuery：
包含依赖
Gridster目前是作为jQuery插件编写的，因此您需要将其包含在文档的开头。请在jQuery下载最新版本。
HTML结构
类名和标记是可自定义的，gridster只关心数据属性。使用如下结构：














网格起来！
Gridster接受一个参数，一个带有配置选项的散列。
$（函数（）{//DOM就绪
$（“.gridster ul”）.gridster({
小部件_边距：[10,10]，
小部件基础尺寸：[140，140]
});
});
要获得API对象，请使用jQuery数据方法，如下所示：
$（函数（）{//DOM就绪
var gridster=$（“.gridster ul”）.gridster（）.data（'gridster'）；
});

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

});