GRIDDLE 2D

by LimitedWard

HTML

<h1>GRIDDLE 2D</h1>
<ul class="griddle">
    <li data-width="4" data-height="6" data-x="0" data-y="0">
        BOX 1<br /><br />
        width: 4<br />
        height: 6<br />
        x: 0<br />
        y: 0
    </li>
    <li data-width="8" data-height="12" data-x="4" data-y="0">
        BOX 2<br /><br />
        width: 8<br />
        height: 12<br />
        x: 4<br />
        y: 0
        <!-- <ul class="griddle" data-width="12" data-height="6" data-x="0" data-y="6">
            <li data-width="6" data-height="12" data-x="0" data-y="0">SUB BOX 1</li>
            <li data-width="6" data-height="12" data-x="6" data-y="0">SUB BOX 2</li>
        </ul> -->
    </li>
    <li data-width="4" data-height="6" data-x="0" data-y="6">
        BOX 3<br /><br />
        width: 4<br />
        height: 6<br />
        x: 0<br />
        y: 6
    </li>
</ul>

CSS

body {
    background:#444;
    color:#fff;
    font-family:arial,sans-serif;
    padding:0;
    margin:0;
}
.griddle {
    list-style-type:none;
    margin:0;
    padding:0;
    position:absolute;
    height:400px;
    width:400px;
    border-bottom:4px solid #fff;
    border-right:4px solid #fff;
    box-sizing:border-box;
}
.griddle li, .griddle .griddle {
    display:block;
    margin:0;
    overflow:auto;
    box-sizing:border-box;
    position:absolute;
}
.griddle li {
    border-top:4px solid #fff;
    border-left:4px solid #fff;
}
.griddle *[data-width="1"] {
    width:8.333%;
}
.griddle *[data-width="2"] {
    width:16.667%;
}
.griddle *[data-width="3"] {
    width:25%;
}
.griddle *[data-width="4"] {
    width:33.333%;
}
.griddle *[data-width="5"] {
    width:41.667%;
}
.griddle *[data-width="6"] {
    width:50%;
}
.griddle *[data-width="7"] {
    width:58.333%;
}
.griddle *[data-width="8"] {
    width:66.667%;
}
.griddle *[data-width="9"] {
    width:75%;
}
.griddle *[data-width="10"] {
    width:83.333%;
}
.griddle *[data-width="11"] {
    width:91.667%;
}
.griddle *[data-width="12"] {
    width:100%;
}
.griddle *[data-height="1"] {
    height:8.333%;
}
.griddle *[data-height="2"] {
    height:16.667%;
}
.griddle *[data-height="3"] {
    height:25%;
}
.griddle *[data-height="4"] {
    height:33.333%;
}
.griddle *[data-height="5"] {
    height:41.667%;
}
.griddle *[data-height="6"] {
    height:50%;
}
.griddle *[data-height="7"] {
    height:58.333%;
}
.griddle *[data-height="8"] {
    height:66.667%;
}
.griddle *[data-height="9"] {
    height:75%;
}
.griddle *[data-height="10"] {
    height:83.333%;
}
.griddle *[data-height="11"] {
    height:91.667%;
}
.griddle *[data-height="12"] {
    height:100%;
}
.griddle *[data-x="0"] {
    left:0;
}
.griddle *[data-x="1"] {
    left:8.333%;
}
.griddle *[data-x="2"] {
    left:16.667%;
}
.griddle *[data-x="3"] {
    left:25%;
}
.griddle *[data-x="4"] {
    left:33.333%;
}
.griddle *[data-x="5"] {
   ...