响应式（？）网格系统

Question

请this site。如您所见，它使用响应式网格系统。网格流在1920x1080屏幕尺寸和1024x768下完美运行。

我想对我的网站做同样的事情，但没有成功。我已经尝试了一些框架（ responsivegridsystem.com ， foundation.zurb.com 和 gumbyframework.com ）并且再次没有成功。

更具体地说，我有一个“2列”布局。左列具有固定宽度，右列包含其他几列。

按照 1920x1080 中的布局（完美运行）：

我在 1280x1024 （不需要的空间）中的布局：

最后，我的布局在 1024x768 （我再次拥有未打开的空间）：

我希望集中所有布局，而不是“不需要的空间”，就像之前通过的网站一样。

我的HTML：

<div class="wrap">
<div class="left-sidebar float-left">
  <div class="shopping-list">
     <div class="inside-padding-10">
        <div class="shopping-list-header">
           <h1>0</h1>
           <p>
              Produtos na sua lista de compras
           </p>
        </div>
        <hr />
        <div class="shopping-list-body">
           <button>Calcular menores preços</button>
        </div>
     </div>
  </div>
  </div>
  <div class="main float-right">
  <ul class="products-list section group">
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
  </ul>
  </div>

CSS：

.wrap {
   padding-right: 195px;
   overflow: hidden;
}

.main {
   margin: 0 -220px 0 auto;
   width: 100%;
}

.main-content .left-sidebar {
   width: 200px;
}

ul.products-list {
   width: 100%;
}

ul.products-list li {
   background-color: red;
   width: 14.6em;
   height: 300px;
   margin-bottom: 5px;
   float: left;
}

有人可以帮助我吗？

Answer 1

使用控制台进行快速播放显示$.fn.isotope - Isotope是David de Sandro的jQuery插件，允许块布局响应性地重新排列（针对各种刺激）。看看DOM检查器会显示元素上的意外结构，但它看起来仍然在功能上可能。

编辑：刚刚检查了DOM - 确实是同位素：$('[class*=isotope]').length>0 === true