How do I fix the layout issues on "Circle" and "Trapezoid" pages?

Question

These pages have a broken and unexpected layout

I have tried using columnspan, rowspan, .gridrowconfigure() and .gridcolumnconfigure() to no avail.

import tkinter as tk
from tkinter import font
import math
import cmath

FONT40 = ('Roboto', 40)
FONT20 = ('Roboto', 20)
FONT24 = ('Roboto', 24)
FONT16 = ('Roboto', 16)
BGCOLOR = '#545454'
BTNCOLOR = '#909090'
pi = (3.14)


root = tk.Tk() #application window
root.geometry("690x938")
root.title("Calculator Project (Beta 0.1)")
root.resizable(0, 0)
root.config(background="#545454")

root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)



page1 = tk.Frame(root, background=BGCOLOR) 
page2 = tk.Frame(root, background=BGCOLOR)
page3 = tk.Frame(root, background=BGCOLOR)
page4 = tk.Frame(root, background=BGCOLOR)

page1.grid(row=0, column=0, sticky="nswe")
page2.grid(row=0, column=0, sticky="nswe")
page3.grid(row=0, column=0, sticky="nswe")
page4.grid(row=0, column=0, sticky="nswe")

for page in (page1, page2, page3, page4):
    page.grid_rowconfigure(0, weight=1)
    page.grid_rowconfigure(0, weight=1)


#PAGE 1 == MAIN PAGE
frame1 = tk.Frame(page1, bg=BGCOLOR)
frame1.pack(expand=1) #center frame


ttl1M = tk.Label(frame1, text="Calculator", font=FONT20, bg=BGCOLOR)
ttl1M.pack(pady=20)

quadratics_btn = tk.Button(frame1, text="Quadratics Calculator", font=FONT20, command=lambda: page2.tkraise(), bg=BTNCOLOR)
quadratics_btn.pack(pady=10)

simple_geometry_btn = tk.Button(frame1, text="Geometry General", font=FONT20, command=lambda: page3.tkraise(), bg=BTNCOLOR)
simple_geometry_btn.pack(pady=10)

notYetImplemented_btn = tk.Button(frame1, text="Not Yet Implemented", font=FONT20, command=lambda: page4.tkraise(), bg=BTNCOLOR)
notYetImplemented_btn.pack(pady=10)

#PAGE2 == QUADRATICS CALCULATOR
frame2 = tk.Frame(page2, bg=BGCOLOR)
frame2.pack(expand=1)


qdrtcs = tk.Label(frame2, text="Quadratic Page", font=FONT20, bg=BGCOLOR)
qdrtcs.grid(row=0, column=0, columnspan=3, pady=20)

#spinboxes for A/B/C start
quadA = tk.Spinbox(frame2, width=5, font=FONT24)
quadA.grid(pady=30, row=1, column=0, columnspan=1)

quadB = tk.Spinbox(frame2, width=5, font=FONT24)
quadB.grid(pady=30, row=1, column=1, columnspan=1)

quadC = tk.Spinbox(frame2, width=5, font=FONT24)
quadC.grid(pady=30, row=1, column=2, columnspan=1)

ans_quadratic = tk.Label(frame2, font=FONT16, text='', bg=BGCOLOR)
ans_quadratic.grid(row=2, column=1, pady=10, columnspan=1)

#Calculation function - quadratics
def quadratic_calculation():
    #gets values from the user (spinboxes)
    valueA = quadA.get()
    valueB = quadB.get()
    valueC = quadC.get()

    try:
          valueA = float(valueA)
          valueB = float(valueB)
          valueC = float(valueC)
    except ValueError:
          print("invalid input, must be an integer(number)")
          return

    discriminant = pow(valueB, 2) - (4*valueA*valueC)

    if discriminant > 0 :

            POSans1 = (-valueB + math.sqrt(discriminant)) / 2*valueA
            POSans2 = (-valueB - math.sqrt(discriminant)) / 2*valueA

            absolute_answer = f"x₁ = {round(POSans1, 2)}" + " , " + f"x₂ = {round(POSans2, 2)}"
            

    elif discriminant == 0:

            EQans1 = (-valueB + math.sqrt(discriminant)) / 2*valueA
            absolute_answer = f"x = {round(EQans1, 2)}"
            

    else:
            NEG_ans1 = (-valueB + cmath.sqrt(discriminant))/ (2*valueA)
            NEG_ans2 = (-valueB - cmath.sqrt(discriminant))/ (2*valueA)

            absolute_answer = f"x₁ = {round(NEG_ans1.real, 2)} + {round(NEG_ans1.imag, 2)}i, x₂ = {round(NEG_ans2.real, 2)} + {round(NEG_ans1.imag, 2)}i"

    ans_quadratic.config(text=absolute_answer)    


get_quadratic_values = tk.Button(frame2, font=FONT20, command=quadratic_calculation, text="Calculate", bg=BTNCOLOR).grid(row=3, column=1, pady=30)    

#Go back button for quadratic page
back_btn = tk.Button(frame2, text="Go back", font=FONT20, command=lambda: page1.tkraise(), bg=BTNCOLOR)
back_btn.grid(row=4, column=0, columnspan=3)

#Page3 Simple Geometry, not yet implemented

geometrySubPage1 = tk.Frame(root, background=BGCOLOR)
geometrySubPage2 = tk.Frame(root, background=BGCOLOR)
geometrySubPage3 = tk.Frame(root, background=BGCOLOR)

geometrySubPage1.grid(row=0, column=0, sticky="nswe")
geometrySubPage2.grid(row=0, column=0, sticky="nswe")
geometrySubPage3.grid(row=0, column=0, sticky="nswe")

for subPage1 in (geometrySubPage1, geometrySubPage2, geometrySubPage3):
    subPage1.grid_rowconfigure(0, weight=1)
    subPage1.grid_columnconfigure(0, weight=1)

frame3 = tk.Frame(page3, bg=BGCOLOR)
frame3.pack(expand=1) #center the frame

nyi1 = tk.Label(frame3, text="Simple Geometry (not yet fully implemented)", font=FONT20, bg="#545454")
nyi1.grid(pady=20)

#geometry buttons navigation
triangleBTN = tk.Button(frame3, text="Calculate Triangles", font=FONT24, bg=BTNCOLOR, command=lambda: geometrySubPage1.tkraise())
triangleBTN.grid(pady=20)

CircleBTN = tk.Button(frame3, text="Calculate Circles", font=FONT24, bg=BTNCOLOR, command=lambda: geometrySubPage2.tkraise())
CircleBTN.grid(pady=20)

trapBTN = tk.Button(frame3, text="Calculate Trapezoids", font=FONT24, bg=BTNCOLOR, command=lambda: geometrySubPage3.tkraise())
trapBTN.grid(pady=20)

back_btn = tk.Button(frame3, text="Go back", font=FONT20, command=lambda: page1.tkraise(), bg=BTNCOLOR)
back_btn.grid(pady=20)

#geometry sub page 1
subFrame1 = tk.Frame(geometrySubPage1, bg=BGCOLOR)
subFrame1.pack(expand=1)

SubGeoLabel = tk.Label(subFrame1, text="triangle area calculator", font=FONT40, bg=BGCOLOR)
SubGeoLabel.grid(row=0, column=0, sticky="wen", pady=40, columnspan=2)

#height
tPrompt1 = tk.Label(subFrame1, text="Input Height: ", font=FONT16, bg=BGCOLOR)
tPrompt1.grid(row=1, column=0, pady=10, columnspan=1)

tHeight = tk.Spinbox(subFrame1, from_=0, to=999, font=FONT16, width=5)
tHeight.grid(row=1, column=1, columnspan=1)
#height
tPrompt2 = tk.Label(subFrame1, text="Input Base: ", font=FONT16, bg=BGCOLOR)
tPrompt2.grid(row=2, column=0, pady=10, columnspan=1)

tBase = tk.Spinbox(subFrame1, from_=0, to=999, font=FONT16, width=5)
tBase.grid(row=2, column=1, columnspan=1)

triangle_answer_label = tk.Label(subFrame1, text='', font=FONT24, bg=BGCOLOR)
triangle_answer_label.grid(row=3, column=0, pady=30, columnspan=2)

#triangle calculations
def triangle_calc():
    triangle_height = tHeight.get()
    triangle_base = tBase.get()
    
    try:
        triangle_height = float(triangle_height)
        triangle_base = float(triangle_base)
    except ValueError:
        print("Invalid input type, must be an integer(number)")
        return
    
    tAns = (1/2) * triangle_base * triangle_height
    
    triangle_answer_label.config(text=f"Triangle area = {tAns}")
    
    

#submit button
tAnswer = tk.Button(subFrame1, text="Calculate", font=FONT24, command=triangle_calc, bg=BTNCOLOR).grid(row=4, column=0, pady=30, columnspan=2)

#back button
back_btn = tk.Button(subFrame1, text="Go back", font=FONT20, command=lambda: page3.tkraise(), bg=BTNCOLOR)
back_btn.grid(pady=20, columnspan=2)

#circle subpage 2

CircleSubPage1 = tk.Frame(root, background=BGCOLOR) #Circle selection screen
CircleSubPage2 = tk.Frame(root, background=BGCOLOR) #Circle Area Calculator page
CircleSubPage3 = tk.Frame(root, background=BGCOLOR) #Circle Circumference Calculator Page

CircleSubPage1.grid(row=0, column=0, sticky="nswe")
CircleSubPage2.grid(row=0, column=0, sticky="nswe")
CircleSubPage3.grid(row=0, column=0, sticky="nswe")

for subPage2 in (CircleSubPage1, CircleSubPage2, CircleSubPage3):
    subPage2.grid_rowconfigure(0, weight=1)
    subPage2.grid_columnconfigure(0, weight=1)


CircleFrame1 = tk.Frame(CircleSubPage1, bg=BGCOLOR)
CircleFrame1.pack(expand=1)


CircleTitleLabel = tk.Label(geometrySubPage2, bg=BGCOLOR, font=FONT24, text='Circle Calculators')
CircleTitleLabel.grid(pady=20, row=0, column=0)

circle_area_btn = tk.Button(geometrySubPage2, text="Area", font=FONT24, command=lambda: CircleSubPage2.tkraise(), bg=BTNCOLOR)
circle_area_btn.grid(pady=20, row=1, column=0)

circle_circumference_btn = tk.Button(geometrySubPage2, text="Circumference", font=FONT24, command=lambda: CircleSubPage3.tkraise(), bg=BTNCOLOR)
circle_circumference_btn.grid(pady=20, row=2, column=0)

                #   I cannot figure out how to fix this darn layout.
                #   It's so annoying that there's this massive space between 
                #   the title and the buttons >:(

#Area of Circle page

CircleFrame2 = tk.Frame(CircleSubPage2, bg=BGCOLOR)
CircleFrame2.pack(expand=1)

    #Circle area page title
circle_area_label = tk.Label(CircleFrame2, text="Circle Area Calculator", font=FONT24, bg=BGCOLOR)
circle_area_label.grid(row=0, column=0, pady=20, columnspan=3)
    #Circle spinbox input prompt
RadPromptQ = tk.Label(CircleFrame2, text="Input Radius: ", font=FONT16, bg=BGCOLOR)
RadPromptQ.grid(pady=20, row=1, column=0, padx=(10,5))

RadPrompt = tk.Spinbox(CircleFrame2, font=FONT16, bg=BGCOLOR, width=10)
RadPrompt.grid(pady=20, row=1, column=1, padx=(5,10), columnspan=3)

C_area_ans_label = tk.Label(CircleFrame2, text='', font=FONT20, bg=BGCOLOR)
C_area_ans_label.grid(pady=20, column=0, row=3, columnspan=3)
    
    #Circle area process
def cAreaCalc():
     C_rad = RadPrompt.get()

     try:
          C_rad = float(C_rad)
     except ValueError:
          print("Invalid input type, must be an integer(number)")
          return
     
     c_area = pi*C_rad**2

     C_area_ans_label.config(text=f"The area of the circle is: {round(c_area, 2)}m²")

c_area_smt_btn = tk.Button(CircleFrame2, text='Submit', font=FONT24, bg=BTNCOLOR, command=cAreaCalc)
c_area_smt_btn.grid(pady=20, column=0, row=4, columnspan=3)
    #Back Button for Circle area page
back_btn = tk.Button(CircleFrame2, text="Go back", font=FONT20, command=lambda: geometrySubPage2.tkraise(), bg=BTNCOLOR)
back_btn.grid(pady=20, row=5, column=0, columnspan=3)
########

# Circumference of circle page
CircleFrame3 = tk.Frame(CircleSubPage3, bg=BGCOLOR)
CircleFrame3.pack(expand=1)

Circumference_title_label = tk.Label(CircleFrame3, text="Circumference Calculator", font=FONT40, bg=BGCOLOR)
Circumference_title_label.grid(pady=20, row=0, column=0, columnspan=2)

circum_label = tk.Label(CircleFrame3, text="input circle radius: ", bg=BGCOLOR, font=FONT24)
circum_label.grid(pady=20, row=1, column=0, columnspan=1)

circum_radius = tk.Spinbox(CircleFrame3, font=FONT20, width=5)
circum_radius.grid(pady=20, row=1, column=1, columnspan=2)

circum_ans_label = tk.Label(CircleFrame3, text='', font=24, fg="#ffffff", bg=BGCOLOR)
circum_ans_label.grid(pady=20, row=2, column=0, columnspan=2)
#Circumference calculation
def circumference_calculate():
     
     circumference_rad = circum_radius.get()
     
     try:
          
          circumference_rad = float(circumference_rad)

     except ValueError:
          print("Invalid input type, must be an integer(number)")
          return
     
     circumference = 2 * pi * circumference_rad

     circum_ans_label.config(text=f"The circumference is: {round(circumference, 2)}")
#######
circum_sbmt_btn = tk.Button(CircleFrame3, text="Calculate", font=FONT24, bg=BTNCOLOR, command=circumference_calculate)
circum_sbmt_btn.grid(pady=20, row=3, column=0, columnspan=2)

back_btn = tk.Button(CircleFrame3, text="Go back", font=FONT20, command=lambda: page3.tkraise(), bg=BTNCOLOR)
back_btn.grid(pady=20, row=4, column=0, columnspan=2)
###########
back_btn = tk.Button(geometrySubPage2, text="Go back", font=FONT20, command=lambda: page3.tkraise(), bg=BTNCOLOR)
back_btn.grid(pady=20, row=4, column=0)

#Trapezoid Subpage

trap_title_label = tk.Label(geometrySubPage3, text="Trapezoid Area Calculator", bg=BGCOLOR, font=FONT24)
trap_title_label.grid(pady=20, row=0, column=0, columnspan=2)

trap_base = tk.Label(geometrySubPage3, text="input trapezoid base: ", bg=BGCOLOR, font=FONT24)
trap_base.grid(pady=20, row=1, column=0, columnspan=1, sticky='e')

trap_base_prompt = tk.Spinbox(geometrySubPage3, font=FONT20, width=5)
trap_base_prompt.grid(pady=20, row=1, column=1, columnspan=2, sticky='w')

trap_height = tk.Label(geometrySubPage3, text="input trapezoid height: ", bg=BGCOLOR, font=FONT24)
trap_height.grid(pady=20, row=2, column=0, columnspan=1, sticky='e')

trap_height_prompt = tk.Spinbox(geometrySubPage3, font=FONT20, width=5)
trap_height_prompt.grid(pady=20, row=2, column=1, columnspan=2, sticky='w')

back_btn_trap = tk.Button(geometrySubPage3, text="Go back", font=FONT20, command=lambda: page3.tkraise(), bg=BTNCOLOR)
back_btn_trap.grid(pady=20, row=3, column=0, columnspan=2)

#Page4 - Not yet implemented

frame4 = tk.Frame(page4, bg=BGCOLOR)
frame4.pack(expand=1) #center the frame

nyi2 = tk.Label(frame4, text="Under further construction", font=FONT20, bg="#545454")
nyi2.pack(pady=20)

#go back button

back_btn = tk.Button(frame4, text="Go back", font=FONT20, command=lambda: page1.tkraise(), bg=BTNCOLOR)
back_btn.pack()

page1.tkraise()
root.mainloop()

This is a personal project of mine. Sorry for the long code. I know my coding style and comments are garbage compared to what some of you senior developers have, but I'm learning. Any other suggestions would be appreciated. Thank you