I am trying to create a gomoku board where users can click on the line intersections. I created this in Vue playground which works fine on a large screen size. However, when I shrink the width of the screen the squares suddenly no longer fit to the parent. I tried all kind of things with aspect ratios on a cell and on the grid parent but it just messed up the shape all together.
Basically I have 2 questions:
- How can I make this grid look good on all screen sizes (down to say around 275px width of the board at least)?
- Is there a simpler solution of doing this?