Also a frontend beginner. I would probably use a canvas for the grid.

can you detect where the user is clicking on a canvas? I want them to be able to click squares and toggle thembetwen open and maze wall

eventually i want to draw lines on the maze to show the solved route, which WOULD be easier on a canvas.

Yes, basically you can get the pointer x, y and need to do the math in code.

Canvas, as you point out makes it more difficult to handle pointer actions

I suggest you use svg instead

there you could draw with a similar api, but also have pointer-events for the individual elements

otherwise, using partition this way is just fine

so i could use the divs for the squres, but maybe draw the route using svg? or would it be one or the other?

You could mix, but it’s easier to just buy in on svg

Creating a square in svg is trivial

Backender myself, but I think you’d enjoy http://www.parens-of-the-dead.com/

That’s pretty cool

not sure if good fit in this case, but worth checking http://quil.info/

If you're only drawing vertical and horizontal lines, you can use divs with borders and/or background colors to draw lines.

there's also css to rotate divs for non vertical/horizontal lines, but at that point, SVG is probably a better fit

Canvas is pretty easy. https://gameoflife2d.gklijs.tech/ play/pause and you can turn cells active/dead. Source https://github.com/gklijs/game-of-life/blob/2d/www/index.js

Seems like a decent solution already if you're just capturing clicks and don't care too much about render time. Lots of divs = more repainting / processing on the DOM level, but it might be perfectly fine for what you're doing. Are you wondering what the fastest implementation might be? or the most convenient to code? or some balance point between/betwixt?

Really more that I'm quite newish to front end stuff and I don't really have anyone to ask that has up to date experience. So I often sit and try to make things all the time wondering "Am I being a total idiot here" with my implementations.

I built https://djblue.github.io/tetris/ in cljs as a table of divs and it works well enough 😆 10 * 24 = 240 elements in the grid.

You are not being an idiot. 😃 And there are lots of way to do it. I bet some CSS magician can do it with gradients or something.

well, i got somethign that sorta works. https://stuartstein777.github.io/maze-solver/ Guess what they say, if it works, it isn't stupid 🙂