CSS网格布局 - 多列，灵活的项目宽度和高度

Question

我为公司创建了一个网店，我遇到了一些困难。我们使用一个名为easywebshop的系统，它为您提供了一个基本（响应）布局，您可以通过编辑CSS和一些图像来管理自己。

到目前为止，除了这个问题之外没有任何问题：我试图创建一个列查看我的项目＆＃34;随机＆＃34;重叠一些列。列外观没有问题，但重叠是！

网上商店给我一个ul一些项目。

＆＃13;

＆＃13;

<ul class="webshop_prodlist_easy webshop_prodborders">
  <li>
    <a href="/detail/4973522-14010-ronde-borstel-hout-black-polyamide">
      <img src="/shops/duxshop/thumbs/4973522-1.jpg" alt="Ronde Borstel - Hout -  - Black -  - Polyamide">
        <div>
          <span>Ronde Borstel - Hout -  - Black -  - Polyamide</span>
          <span class="webshop_price"></span>
      </div>
    </a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

我已经添加了一个关于我想要如何看待它的设计示例。如果你可以帮助我创建网格，其余的由我们决定！

编辑：我设法为头部添加了额外的链接。 什么是我最好的选择？我可以在可以链接到的其他服务器上托管脚本和样式表。

编辑：现场演示，现在使用Masonry：duxshop.be