Calculate where the grid should be drawn and draw it.
React to mouse events to detect clicks, drags etc.
Based on mouse events detect if the user drags the grid and recalculate how it should be drawn.
Based on events detect if the user wants to zoom and recalculate zoom factors and where to draw the grid.
Etc etc etc.
You basically just need to figure out what you want your grid to do, react to events to determine what action the user is performing, update your internal representation of the world (your grid) and then draw your internal representation.
Just like you'd approach most programming tasks; figure out all the individual steps involved and then implement them all one by one.
