HTML JS

HOW TO CREATE A GRID IN JAVASCRIPT

(quick guide & example)

<style> #grid {   GRID LAYOUT   display: grid;     3 COLUMNS   grid-template-columns: repeat(3, auto); } </style>

HTML CSS GRID CONTAINER

01

<div id="grid"></div>

DATA ARRAY var data = [   ["A", "B", "C"],   ["D", "E", "F"] ];

JAVASCRIPT ARRAY TO GRID

02

LOOP + ADD CELLS var g = document.getElementById("grid"); for (let i of data) { for (let j of i) {   let cell = document.createElement("div");   cell.innerHTML = j;   cell.className = "cell";   g.appendChild(cell); }}