Edit in JSFiddle

.item {
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    float: right;
    line-height: 100%;
    overflow: hidden;
}
.box {
    width: 600px;
    height: 200px;
    display: inline-block;
    line-height: 0px;
    margin: 0px;
    position: relative;
}
.fixed {
    position: absolute;
    top: 0;
    left: 0;
}
.slider {
    width: 600px;
    height:20px;
}
.blue {
    border-width: 1px;
    border-style: dotted;
    border-color: blue;
    overflow: hidden;
}
.vertical {
    width: 200px;
    height:20px;
    transform-origin: bottom right;
    -webkit-transform-origin: bottom right;
    transform: rotate(90deg) translateY(200px);
    -webkit-transform: rotate(90deg) translateY(200px);
    vertical-align: bottom;
}
.container {
    width: 1000px;
    height: 250px;
    overflow: hidden;
    display: inline-block;
}

.gridtainer {
    display: grid;
    grid-definition-columns: 33% 33% 34%;
    grid-definition-rows: 33% 33% 34%; 
    
    display: -webkit-grid;
    -webkit-grid-definition-columns: 33% 33% 34%;
    -webkit-grid-definition-rows: 33% 33% 34%; 
    
    display: -ms-grid;
    -ms-grid-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    -ms-grid-rows: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%; 
}

.A {
    color: yellow;
    background-color: purple;
    border-color: cyan;
}
.B {
    background-color: goldenrod;
    border-color: darkblue;

}

select {
    width: 80px;
}

body{
    overflow:hidden;
}

Troy Whorten's Grid Demo: (click boxes to remove them)<br/>
<div class="container">
    <div class="box">
        <div id="target" class="fixed blue box gridtainer">
        </div>
    </div>
    <input class="vertical slider" type="range" min="0" max="100" step="5" value="100" onchange="document.getElementById('target').style.height = this.value + '%';" />
    <br/>
    <input class="slider" type="range" min="0" max="100" step="5" value="100" onchange="document.getElementById('target').style.width = this.value + '%';" />
</div>
<br/>
<button onclick="addBox()">Add Box</button>

//written by Troy Whorten 3/25/2014

var currentBox = 'A';

function addBox() {
    var target = document.getElementById("target");
    var box = document.createElement("div");
    box.setAttribute("class", "item " + currentBox);
    box.setAttribute("onclick", "this.parentNode.removeChild(this)");
   
    var row = Math.floor(Math.random()*10)+1;
    var col = Math.floor(Math.random()*10)+1;
    var rows = Math.floor(Math.random()*3)+1;
    var cols = Math.floor(Math.random()*3)+1;
    var gs = "-ms-grid-row: "+ row +";-ms-grid-column: "+ col +";"
    gs += "-ms-grid-row-span: "+ rows +";-ms-grid-column-span: "+ cols +";"
    box.setAttribute("style",gs);
    box.innerHTML = "R"+row+"C"+col+" "+rows + "x" + cols;
    if (currentBox == 'A') {
        
        currentBox = 'B';
    } else {
        
        currentBox = 'A';
    }

    target.appendChild(box);
}

function changeFlex(prop, el) {
    var target = document.getElementById("target");
    execstring = "target.style." + prop + "=el.value;";
    eval(execstring);
    execstring = "target.style." + capitalize(prop) + "=el.value;";
    eval(execstring);
    // eval("target.style.webkit"+ wk +"=el.value)");
    //target.setAttribute("-webkit-"+prop,el.value);
}

function capitalize(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}