how to transition between pygame windows and functions

The lines in the block beneath if event.type == pygame.KEYDOWN: only get executed if a button is pressed - and only once per KEYDOWN!

Since you have no separate loop after the initial pygame.KEYDOWN, your while running: continues after the functions title_game(), title_underline() and grid() are executed once. Then the loop starts anew and the function title_main() also gets executed again (which is why it is still displayed).

I think you might want to implement another loop after the KEYDOWN was registered.

You will also have to capture the input in this loop separately as you don't "come back" to the for event in pygame.event.get(): in your while running: loop.

I included a bit more cleaned-up version of the code and implemented a game loop after showing your title_main() as I understood your problem.

while running:  # your loop - display the title and wait for a button to be pressed
    for event in pygame.event.get():  
        screen.fill((0, 0, 0))
        title_main()
        if event.type == pygame.QUIT:
            running = False
        if event.type == pygame.KEYDOWN: 
              # start the actual game upon pressing a button for the first time
              running = game_loop() # stop the loop if the game returns with False
        pygame.display.update()
    

def game_loop():
     game_is_active = True
     while game_is_active :
         for game_event in pygame.event.get():
            if game_event.type == pygame.QUIT:
                  return False  # return to your outer loop
         # game logic - display the title, the underline and the grid: 
         screen.fill((0, 0, 0))
         title_game()
         title_underline()
         grid()
         pygame.display.update() # update screen

@Cribber explains why your existing loop is not working.

I would like to provide an answer where only a single event-loop is used because I believe having a simple main-loop is the best architecture for an event-driven program (i.e.: all PyGame programs).

Your program is divided into two states, showing the "title page" and "main application". I would keep this state in a variable, and determine which path to take in the main loop based on it. At each step of the draw → input → update cycle, examine the state (iff necessary) and act based on the value.

# Function definitions as per question

# States the app can be in
TITLE_PAGE = 10   # TODO: maybe use an Enumerated Type
MAIN_APP   = 20

app_state = TITLE_PAGE  # start with the titles

while running:
    # Handle user input
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        if event.type == pygame.KEYDOWN:
            if ( app_state == TITLE_PAGE ):
                # user dismissed title page, switch to app-mode
                app_state = MAIN_APP

    # Update the screen
    screen.fill((0, 0, 0))
    if ( app_state == TITLE_PAGE ):   # In Title-page mode?
        title_main()
    elif ( app_state == MAIN_APP ):   # In Main-Application mode?
        title_game()
        title_underline()
        grid()

    pygame.display.update()

Sure, when it's very simple like this, it's not a big deal which way it's implemented. But as the program becomes more and more complex, it helps to lay-out the logic flow in simple steps. There's no duplicated event-loop code blocks, or screen-painting, so (for example) if there's a user-input bug, it can only be in one place.

EDIT: Handling first and second mouse clicks

It's pretty easy to handle two mouse clicks. It's just necessary to remember both the click-count, and where the "previous" click was.

This can be accomplished by storing a single initialised variable first_click, but starting with a value of None. The None is important, because it indicates there has not been a click yet. So it tracks the first/second click, and where the position of the first click.

So...

• if first_click == None → User has not clicked yet
• if first_click != None → First click OK, waiting on second.

In your code, first_click is called start. It just needs to be initialised to None.

start = None   # no clicks yet

def game_loop():
     game_is_active = True
     while game_is_active:
         for game_event in pygame.event.get():
            if game_event.type == pygame.QUIT:
                game_is_active = False
            if game_event.type == pygame.MOUSEBUTTONDOWN:
                # Mouse has been clicked
                if ( start == None ):             # Is this a first click?
                    # Save the First click 
                    start = pygame.mouse.get_pos()      
                else:
                    # This is a second click, process both
                    handleTwoClicks( start, pygame.mouse.get_pos() )
                    # reset back to no-clicks-made
                    start = None