How to make a little grid layout in Javascript
Posted on November 17, 2019
If you want to position elements in a grid layout with javascript, it's better to create an array with useful parameters first.
Here the snippet to build it:
// filename: grid.js
export (cols, rows) => {
const arr = []
for (let i = 0; i < cols; ++i) {
for (let j = 0; j < rows; ++j) {
arr.push({ x: i, y: j })
}
}
return { arr, cols, rows }
}
With this little module you can compute an array that can be used to position elements in a grid layout:
import grid from './grid.js'
const myGrid = grid(10, 15)
And here the code to draw something on screen, using d3.js in my case:
// it's assumed there are width and height of the canvas available
let sidew = width / grid.cols
let sideh = height / grid.rows
d3.select('svg')
.selectAll('rect')
.data(myGrid.arr)
.enter()
.append('rect')
.attr('width', sidew)
.attr('height', sideh)
.attr('x', (d,i) => d.x * sidew)
.attr('y', (d,i) => d.y * sideh)