DEV Community 👩‍💻👨‍💻

Romain Lebesle
Romain Lebesle

Posted on • Updated on • Originally published at thoughtsunificator.me

How to build a Grid system in JavaScript

While making my connect four in JavaScript I thought it would be great to build a reusable and scalable grid system.

That's what I'm sharing with you today.

So first, let's go through the basics, exactly how can we define a grid system?

We could say that a grid is made of cells that are organized into rows.

Grid

So let's start from here and make a Grid class that will hold our rows:

grid.js

class Grid {

  constructor() {
    this._rows = {}
  }

  /**
   * @readonly
   * @type {object}
   */
  get rows() {
    return this._rows
  }

}
Enter fullscreen mode Exit fullscreen mode

Here, my rows variable type is an object but you could also use an array.

Row

Now that we have our grid class ready, let's create a Row class:

row.js

class Row {

  /**
   * @param {number} x
   */
  constructor(x) {
    this._x = x
    this._cells = {}
  }

  /**
   * @readonly
   * @type {object}
   */
  get cells() {
    return this._cells
  }

  /**
   * @readonly
   * @type {number}
   */
  get x() {
    return this._x
  }

}
Enter fullscreen mode Exit fullscreen mode

As you can see Row is in fact an abstraction of x in our grid. Just like the Grid class holds rows our Row class holds cells.

From here the next step would be to add cells to the grid, so let's create a method inside our Grid class that'll do just that.

Adding cells to our grid

grid.js

/**
 * @param {number} x
 * @param {number} y
 * @returns {Cell}
 */
addCell(x, y) {
  const cell = new Cell(x, y)
  if(!this.rows[cell.x]) {
    this.rows[cell.x] = new Row(cell.x)
  }
  cell._row = this.rows[cell.x]
  this.rows[cell.x].cells[cell.y] = cell
}
Enter fullscreen mode Exit fullscreen mode

Now we can do something like:
demo.js

const grid = new Grid()
grid.addCell(0, 0)
Enter fullscreen mode Exit fullscreen mode

Now that we're good with the row part let's dive into the cell part.

Cell

cell.js

class Cell {

  /**
   * @param {number} x
   * @param {number} y
   */
  constructor(x, y) {
    this._x = x
    this._y = y
  }

  /**
   * @readonly
   * @type {number}
   */
  get x() {
    return this._x
  }

  /**
   * @readonly
   * @type {number}
   */
  get y() {
    return this._y
  }

}
Enter fullscreen mode Exit fullscreen mode

demo.js

const grid = new Grid()
grid.addCell(0, 0)
Enter fullscreen mode Exit fullscreen mode

Let's build a 4x4 grid then.

4x4 grid

demo.js

const size = 4
const grid = new Grid()
for(let x = 0; x < size; x++) {
  for(let y = 0; y < size; y++) {
    grid.addCell(x, y)
  }
}
Enter fullscreen mode Exit fullscreen mode

There are lots more that we could do but let's save it for later...

Also, check out the library I made out of this grid system: https://github.com/thoughtsunificator/grid.

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await