Solution

Create a change grid size button that gives users an option to increase / decrease the grid size to their liking.
You can choose to do it any way. An example way: 2 input boxes, 1 confirm button.

The code to dynamically generate the rows and columns already exists in bfs.js. You just need to

Validation

Make sure there's input validation:

1. The smallest grid size is 5x5
2. No empty grid size allowed

Special Case:

Add a note on large grid sizes - When the user is entering a grid size that will go beyond their screen (overflow), give a warning saying that the size they're trying to enter will overflow and the largest recommended grid size is <grid_size>

First step is to calculate the largest grid size <grid_size> that they can have without cells overflowing their screen.
You can do something like: screen width/cell width x screen height/cell height
for e.g. if their screen size is 1920x1080, the largest grid size can be: 96x54 (since a cell is 20px x 20px)

Note: We need to take the existing buttons into account and subtract that part from the height so the canvas doesn't overflow outside of the screen.