Multi Column Layout Grid Programming Tutorial
Learn to program multi-column grid layouts using just a little bit of core JavaScript. A multi column grid allows for boxes of varying heights to neatly stack across and down the page with no wasted space. It is an effect that cannot be rendered using tables or CSS floating elements when one is dealing with DIVs of varying heights.
Code Example #1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div#grid_container{
width:900px;
margin:0px auto;
height:860px;
border:#999 1px dashed;
}
div#grid_container > div{
position:absolute;
width: 291px;
border: #000 1px solid;
}
div#grid_container > div:nth-child(2n+0) {
background: #FFDC64;
}
div#grid_container > div:nth-child(2n+1) {
background: #FEC910;
}
div#grid_container > div > div{ padding: 20px; font-size: 27px; color:#D9A800; }
</style>
<script>
function renderGrid(){
var blocks = document.getElementById("grid_container").children;
var pad = 10, cols = 3, newleft, newtop;
for(var i = 1; i < blocks.length; i++){
if (i % cols == 0) {
newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
blocks[i].style.top = newtop+"px";
} else {
if(blocks[i-cols]){
newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
blocks[i].style.top = newtop+"px";
}
newleft = (blocks[i-1].offsetLeft + blocks[i-1].offsetWidth) + pad;
blocks[i].style.left = newleft+"px";
}
}
}
window.addEventListener("load", renderGrid, false);
window.addEventListener("resize", renderGrid, false);
</script>
</head>
<body>
<div id="grid_container">
<div style="height:140px;"> <div>1</div> </div>
<div style="height:200px;"> <div>2</div> </div>
<div style="height:120px;"> <div>3</div> </div>
<div style="height:180px;"> <div>4</div> </div>
<div style="height:150px;"> <div>5</div> </div>
<div style="height:160px;"> <div>6</div> </div>
<div style="height:180px;"> <div>7</div> </div>
<div style="height:170px;"> <div>8</div> </div>
<div style="height:160px;"> <div>9</div> </div>
<div style="height:180px;"> <div>10</div> </div>
<div style="height:150px;"> <div>11</div> </div>
<div style="height:160px;"> <div>12</div> </div>
<div style="height:130px;"> <div>13</div> </div>
<div style="height:140px;"> <div>14</div> </div>
<div style="height:210px;"> <div>15</div> </div>
</div>
</body>
</html>
Code Example #2( full screen width ):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body { margin:0px; }
div#grid_container {
width:100%;
height:1200px;
}
div#grid_container > div {
position: absolute;
width: 25%;
min-width:250px;
}
div#grid_container > div > div {
margin:5px;
border: #960 1px solid;
font-size: 50px;
background:#FFDC64;
}
</style>
<script>
function renderGrid() {
var blocks = document.getElementById("grid_container").children;
var cols = 4, newleft, newtop;
for(var i = 1; i < blocks.length; i++){
if (i % cols == 0) {
newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight);
blocks[i].style.top = newtop+"px";
} else {
if(blocks[i-cols]){
newleft = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight);
blocks[i].style.top = newleft+"px";
}
newleft = (blocks[i-1].offsetLeft + blocks[i-1].offsetWidth);
blocks[i].style.left = newleft+"px";
}
}
}
window.addEventListener("load", renderGrid, false);
window.addEventListener("resize", renderGrid, false);
</script>
</head>
<body>
<h1 style="text-align:center;">Core JavaScript Multi-Column Full Screen Grids Tutorial</h1>
<div id="grid_container">
<div><div style="height:350px;"></div></div>
<div><div style="height:200px;"></div></div>
<div><div style="height:300px;"></div></div>
<div><div style="height:180px;"></div></div>
<div><div style="height:150px;"></div></div>
<div><div style="height:240px;"></div></div>
<div><div style="height:180px;"></div></div>
<div><div style="height:170px;"></div></div>
<div><div style="height:160px;"></div></div>
<div><div style="height:180px;"></div></div>
<div><div style="height:150px;"></div></div>
<div><div style="height:160px;"></div></div>
<div><div style="height:180px;"></div></div>
<div><div style="height:150px;"></div></div>
<div><div style="height:240px;"></div></div>
<div><div style="height:350px;"></div></div>
</div>
</body>
</html>