(function(){
// Create container
const grid = document.createElement("div");
grid.id = "js-grid";
document.body.appendChild(grid);
// Inject styles
const style = document.createElement("style");
style.innerHTML = `
#js-grid {
height: 100vh;
width: 700vw;
display: grid;
grid-template-rows: repeat(10, var(--cell));
grid-auto-flow: column;
grid-auto-columns: var(--cell);
}
#js-grid .cell {
box-sizing: border-box;
border: 1px solid rgba(0,0,0,0.15);
background: rgba(0,0,0,0.05);
}
html, body {
overflow-x: auto;
overflow-y: hidden;
margin: 0;
}
`;
document.head.appendChild(style);
function build(){
grid.innerHTML = "";
const cell = window.innerHeight / 10;
document.documentElement.style.setProperty("--cell", cell + "px");
const totalWidth = window.innerWidth * 7;
const cols = Math.ceil(totalWidth / cell);
const total = cols * 10;
for(let i=0;i<total;i++){
const d = document.createElement("div");
d.className = "cell";
grid.appendChild(d);
}
}
build();
window.addEventListener("resize", build);
})();