栅格网格未正确对齐

Question

我在项目中使用grider.js，但是由于某些原因（以及该站点上文档的缺乏），我很难获得我想要的东西。

我的html是

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">A</li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="2">B</li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="2">C</li>
        <li data-row="4" data-col="1" data-sizex="1" data-sizey="2">D</li>
        <li data-row="5" data-col="1" data-sizex="1" data-sizey="2">E</li>
    </ul>
</div>

我的js是

      var gridster;

      $(function(){

        gridster = $(".gridster ul").gridster({
          widget_base_dimensions: [100, 20],
          widget_margins: [5, 5],
          helper: 'clone',
          /*max_rows: 16,
          max_cols: 10,*/
          resize: {
            enabled: true,
            max_size: [4, 4],
            min_size: [1, 1]
          }
        }).data('gridster');


      });

css是

.gridster ul {
    list-style: none;
    background-color: gray;
}
.gridster ul li {
    background-color: red;
}

这是看起来不正确的输出。

我期望的是，所有A，B，C，D和E都在一列中有5个不同的行。我这样做的原因是因为我希望第一个小部件的尺寸小于所有其他小部件的尺寸。

JsFiddle解决我的问题。