GRIDDLE 2D

by LimitedWard

HTML

<h1>GRIDDLE 2D</h1>
<ul class="griddle">
    <li style="background:#0000FF;" data-width="4" data-height="8" data-x="0" data-y="0">1</li>
    <li style="background:#0066FF;" data-width="8" data-height="4" data-x="4" data-y="0">2</li>
    <li style="background:#0099FF;" data-width="4" data-height="4" data-x="4" data-y="4">3</li>
    <li style="background:#00CCFF;" data-width="4" data-height="8" data-x="8" data-y="4">4</li>
    <li style="background:#00CCCC;" data-width="8" data-height="4" data-x="0" data-y="8">5</li>
</ul>
<br>
<pre><code>&lt;ul class=&quot;griddle&quot;&gt;<br/>    &lt;li style=&quot;background:#0000FF;&quot; data-width=&quot;4&quot; data-height=&quot;8&quot; data-x=&quot;0&quot; data-y=&quot;0&quot;&gt;1&lt;/li&gt;<br/>    &lt;li style=&quot;background:#0066FF;&quot; data-width=&quot;8&quot; data-height=&quot;4&quot; data-x=&quot;4&quot; data-y=&quot;0&quot;&gt;2&lt;/li&gt;<br/>    &lt;li style=&quot;background:#0099FF;&quot; data-width=&quot;4&quot; data-height=&quot;4&quot; data-x=&quot;4&quot; data-y=&quot;4&quot;&gt;3&lt;/li&gt;<br/>    &lt;li style=&quot;background:#00CCFF;&quot; data-width=&quot;4&quot; data-height=&quot;8&quot; data-x=&quot;8&quot; data-y=&quot;4&quot;&gt;4&lt;/li&gt;<br/>    &lt;li style=&quot;background:#00CCCC;&quot; data-width=&quot;8&quot; data-height=&quot;4&quot; data-x=&quot;0&quot; data-y=&quot;8&quot;&gt;5&lt;/li&gt;<br/>&lt;/ul&gt;</code></pre>

CSS

body {
    background:#444;
    color:#fff;
    font-family:arial,sans-serif;
    padding:0;
    margin:0;
    text-align:center;
}
pre {
    text-align:left;
    border:4px solid #fff;
    border-radius:10px;
    padding:50px 10px 10px 10px;
    overflow:auto;
    position:relative;
    display:inline-block;
}
pre:before {
    content:'CODE';
    display:block;
    background:#fff;
    color:#444;
    padding:10px;
    position:absolute;
    top:-4px;
    left:-4px;
    border-radius:0 0 10px 0;
}
.griddle {
    text-align:left;
    list-style-type:none;
    margin:0;
    padding:0;
    position:relative;
    height:400px;
    width:80%;
    border-bottom:4px solid #fff;
    border-right:4px solid #fff;
    display:inline-block;
}
.griddle li {
    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...