iWonder responsive grid bookmarklet

gridder.js

(function() {
    var opacity = "0.4";
    
    function removeGrid() {
        gridder = document.querySelector(".gridder");
        
        if (gridder) {
            gridder.parentNode.removeChild(gridder);
        }
    }
    
    function updateGrid() {
        var cols = document.querySelectorAll(".gridder__column");
        
        if (window.innerWidth < 600) {
            var gutterWidth = 8;
        } else {
            var gutterWidth = 16;
        }
        
        if (window.innerWidth >= 1008) {
            var gridWidth = 1008;
        } else {
            var gridWidth = window.innerWidth;
        }

        var columnWidth = (gridWidth - (13 * gutterWidth)) / 12;
        
        for (var i = 0; i < cols.length; i++) {
            var left = ((i) * gutterWidth) + (i * columnWidth);
            cols[i].style.left = left + "px";
            cols[i].style.width = columnWidth + "px";
            cols[i].style.borderWidth = gutterWidth + "px";
        }
        
        var container = document.querySelector(".gridder");
        container.style.width = gridWidth + "px";
        container.style.borderWidth = ((window.innerWidth - gridWidth) / 2) + "px";
    }
    
    function createGrid() {
        var container = document.createElement('div');
        container.style.position = "absolute";
        container.classList.add("gridder");
        container.style.position = "fixed";
        container.style.top = 0;
        container.style.height = "100%";
        container.style.zIndex = 1000000;
        container.style.borderLeft = "0px solid rgba(0, 0, 255, " + opacity + ")";
        container.style.borderRight = "0px solid rgba(0, 0, 255, " + opacity + ")";
        
        for (var i = 1; i <= 12; i++) {
            var col = document.createElement('div');
            col.classList.add("gridder__column");
            col.style.position = "absolute";
            col.style.backgroundColor = "#ff0000";
            col.style.opacity = opacity;
            col.style.height = "100%";
            col.style.borderLeft = "0px solid rgba(0, 255, 0, " + opacity + ")";
            
            if (i == 12) {
                col.style.borderRight  = "0px solid rgba(0, 255, 0, " + opacity + ")";
            }
            
            container.appendChild(col);
        }
        
        document.querySelector("body").appendChild(container);
    }
    
    removeGrid();
    
    createGrid();
        
    updateGrid();
    
    window.addEventListener("resize", function() {
        updateGrid();
    });
})();