Grid Type 2

by mikeskinner

CSS

:root {
  --color1: yellow;
  --color2: green;
}

body {
    padding: 0;
}

.divColor {
  background-color: var(--color2);
}

.grid {
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
}

.grid div {
    border: 1px solid #aaa;
    border-width: 0 1px 1px 0;
    float: left;
}

JavaScript

function createGrid(size) {
    var ratioW = Math.floor($(window).width()/size),
        ratioH = Math.floor($(window).height()/size);
    
    var parent = $('<div />', {
        class: 'grid', 
        width: ratioW  * size, 
        height: ratioH  * size
    }).addClass('grid').appendTo('body');

    for (var i = 0; i < ratioH; i++) {
        for(var p = 0; p < ratioW; p++){
            $('<div />', {
                width: size - 1, 
                height: size - 1,
                class: 'divColor'
            }).appendTo(parent);
            
        }
    }
}


createGrid(100);