Shapeshift Simple

by jquery juq

HTML

<script src="http://mcpants.github.io/jquery.shapeshift/core/jquery.shapeshift.min.js"></script>
<div class="container">
    <div></div>
    <div></div>
    <div data-ss-colspan='2'></div>
    <div></div>
</div>

<div class="container">
    <div></div>
    <div data-ss-colspan='2'></div>
    <div></div>
    <div></div>
</div>

CSS

.container {
    border: 1px dashed #ccc;
    position: relative;
}

.container > div {
    background: #CCC;
    height: 100px;
    position: absolute;
    width: 80px;
}

.container > div[data-ss-colspan='2'] { width: 170px; }

.container .ss-placeholder-child {
    background: transparent;
    border: 1px dashed red;
}

JavaScript

$(".container").shapeshift({
    minColumns: 3
});