Jquery 响应（？）网格系统

看。正如您所看到的，它使用了一个响应的网格系统。网格流在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>

---

有人能帮我吗？

快速玩一下控制台就会发现

$。fn.isotox

-是一个jQuery插件，它允许块布局响应地重新排列（以适应各种刺激）。查看DOM检查器可以发现元素上意外的结构，但它在功能上仍然是可能的

---

编辑：刚刚再次检查了DOM-它确实是同位素：

$（“[class*=同位素]”）。长度>0==true

在调整大小时，您的参考站点也有“不需要的”空间。我不确定您想要实现的是任何单个框架的工作-它很可能是定制编码以满足他们的需要。不要使用负边距，只有在您真正需要它的时候。但十分之九的人不会。考虑到他的布局，拉斐尔需要它。@Michael哦，不，他不需要。我们做网格已经十多年了，我们可以做得比那种黑客技术更好@Barney不使用javascript或flexbox，后者几乎支持0，并且假设OP想要一个只支持CSS的解决方案，那么是的，他考虑了侧边栏的模糊宽度。很棒的插件，喜欢它。他只需要把整个事情重新考虑一下。@Rafael他实际上在做一个替代项目，……嗨，伙计们！我认为派克将是我的解决方案，但在推出之前，最好的替代方案是什么？同位素？@Guillerme是的-这就是你链接到的网站上使用的。哦，好的，巴尼。谢谢，伙计！

.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;
}