Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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>
thumb

JavaScript Videos

General Programming

Flat Icons HTML Code Symbols Discovery JavaScriptHow to Program Code Syntax Highlighter Using JavaScriptFat Arrow Functions JavaScript Programming TutorialJavaScript Arguments Object Function TutorialJavaScript Storage Interface sessionStorage localStorage TutorialMulti Column Layout Grid Programming TutorialCustom Alert Box Programming TutorialCustom Confirm Box Programming TutorialCustom Prompt Box Programming TutorialChange CSS Class Style className Toggle TutorialPartial Print Document Tutorial HTML div ContentClick Outside Close Menu Box TutorialPercent Math Calculations Programming TutorialDual Image Reveal Control TutorialPage Loading Screen Document Preloader TutorialControl Panel Flyout Menu Windows AnimationsCustom Data Attributes HTML JavaScript CSS TutorialFullscreen API JavaScript Code Examples and SpecificationConsole Log Tutorial Chrome Firefox IE BrowsersToggle Function Click Drop Down Menus TutorialChange Tab Text and Window Title On The Fly TutorialDice Roll Programming Tutorial For Web Browser GamesDynamic Lorem Ipsum Placeholder Text TutorialBest HTML Event Handling addEventListener TutorialsetAttribute removeAttribute Methods TutorialDisabled User Handling Redirect WebsiteCapture Keyboard Input Tutorial HTML ApplicationCapture Keyboard Input Condition Logic TutorialChange Style Sheet Using Tutorial CSS Swap StylesheetWeb Page Overlay Tutorial Transparent CoverLights Out For Earth Day Tutorial Dark Page SwitchWindow Size Responsive CSS Layout Stylesheet Change TutorialRead Mouse Coordinates Pointer Position Tutorial