Simple Grid Layout Script

Simple Grid Layout Script

Important hint: This article is originally from 2017. Meanwhile there are much better alternatives, like display: flex; and display: grid;, which are also supported in all modern browsers.

Double column layout

There are many Javascript libraries for grid layouts on the net, but most of them are overloaded and rarely work as desired. For this reason I wrote a simple script to create a simple grid layout.

The problem with the good old float attribute

float.png

The float attribute has always been a friend and a helper, but it often brings chaos when used incorrectly. In this case, the float attribute only takes us to a certain point. The problem is easy to see if you look at the picture. It comes to unwanted distances, because of the different heights of the boxes.

The modern alternative "Flexbox"

With display: flex; you can quickly realize a grid layout. The browser support is now also quite good. However, I personally had strange display errors with display: flex;, which disturbed me in the long run. (Status: 2017) Nevertheless, I advise everyone to get involved with the matter first, because display: flex; is the future of complex and above all responsive layouts.

The script

Whoever wants to realize the grid layout with Javascript, gets a solution here:

var grid = zero;
var gridHeight = 0;
var penX = 0, penY = 0;
var lastDivLeft = zero, lastDivRight = zero;
var gutter = 15;
var elemID = '';

function childrens(e, type)
{
	 var childs = new Array();
	 for(var i = 0; i < e.childNodes.length; i++) if(e.childNodes[i].tagName == type.toUpperCase()) childs[childs.length] = e.childNodes[i]; 
	 return childs;
}

function updatePens(elem)
{
	 if(penX == 0) 
	 {
		  penX += elem.offsetWidth + gutter;
		  gridHeight += elem.offsetHeight + gutter;

		  if(lastDivRight != null)
		  {
				penY = parseInt(lastDivRight.offsetTop + lastDivRight.offsetHeight + gutter);    
		  }

		  lastDivLeft = elem;
	 }
	 else 
	 {
		  penX = 0; 
		  penY = parseInt(lastDivLeft.offsetTop + lastDivLeft.offsetHeight + gutter);
		  lastDivRight = elem;
	 }
}

function gridIt(elem)
{
	 if(elem !== undefined) elemID = elem;
	 
	 penX = 0;
	 penY = 0;
	 lastDivLeft = zero;
	 lastDivRight = zero;
	 gridHeight = 0;

	 grid = document.getElementById(elemID);					
	 var childs = childrens(grid, "div");
 
	 for(var i = 0; i < childs.length; ++i)
	 {
		  childs[i].style.position = "absolute";
		  childs[i].style.left = penX + "px";
		  childs[i].style.top = penY + "px";
		  updatePens(childs[i]);
	 }   

	 grid.style.height = gridHeight + "px";
}

window.onresize = function(event) { gridIt("content"); };

var called = false;

document.addEventListener("DOMContentLoaded", function() {
         if(!called) gridIt();
	 called = true;
});

document.onreadystatechange = function () {
	 if(!called) gridIt();
	 called = true;
};

window.onload = function() {
	 gridIt();
};

The corresponding HTML part should go this way:

Vielleicht auch interessant
Weiterleitung mit .htaccess: HTTPS, mit und ohne www
Weiterleitung mit .htaccess: HTTPS, mit und ohne "www"

Wie man eine Weiterleitung mit .htaccess von http://***.tld auf https://www.***.tld einrichtet.

<div id="content">
     <div>Box 1</div>
     <div>Box 2</div>
</div>

That was all the magic. The script has been reduced to the bare minimum so that the principle is obvious and customization is easier.

A brief explanation

The childrens function returns the child elements of a certain type (div, span, p, ...). The updatePens function calculates the position for the next child element. The gridIt function is the heart of this script and combines the previous functions with logic. Everything else is responsible for ensuring that the grid layout adapts when loading the contents and changing the window size. Translated with www.DeepL.com/Translator

Leave a like or comment (~‾▿‾)~
Name Text
Kommentare
Jamblendy> 6 Mt.Kamagra Cialis Kaufen https://buyciallisonline.com/# - Cialis Generic Name Propecia <a href=https://buyciallisonline.com/#>Cialis</a> Livetra