Positioning

Set an element into the middle of a Gridster li

<li data-row="5" data-col="4" data-sizex="6" data-sizey="3">
  <header>EXAMPLE6</header>
  <div class="center">
    <div>Text in der Mitte</div>
  </div>
</li>

Set two elements into a Gridster li.

The header also takes up some space. Therefore the next two elements can only use 2x 40% of the total height.

solution 1: use class="row-40"

<li data-row="1" data-col="1" data-sizey="2" data-sizex="2">
    <header>SWITCH</header>
    <div class="row-40 center" data-type="push" data-device="dummy1"></div>
    <div class="row-40 center" data-type="switch" data-device="dummy2"></div>
</li>

solution 2: use class="row" with wrapper div. The height of the wrapper gets automatically calculated (100% - header-height). class="row" for two content elements of the wrapper causes 2x 50% for this elements.

<li data-row="1" data-col="1" data-sizey="2" data-sizex="2">
    <header>SWITCH</header>
    <div>
        <div class="row center" data-type="push" data-device="dummy1"></div>
        <div class="row center" data-type="switch" data-device="dummy2"></div>
    </div>
</li>

solution 3: use class="vbox" as a wrapper. The height of the vbox gets automatically calculated (100% - header-height) and the child elements spaced evenly around the box.

<li data-row="1" data-col="1" data-sizey="2" data-sizex="2">
    <header>SWITCH</header>
    <div class="vbox items-space-around">
        <div data-type="push" data-device="dummy1"></div>
        <div data-type="switch" data-device="dummy2"></div>
    </div>
</li>