.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); }