You didn't way what the preferred behavior is, only that what it's doing is wrong. I don't know if this suggestion will do what you want or not.

As a rule of thumb, when you use grid you should always give at least one row and one column a weight for the parent containing the widgets being managed. While you do that for widgets in the container, you don't do it for the root window. Therefore, widgets inside the container might be resizing properly, but you won't see it because the container itself isn't resizing.

If you're only going to put a single widget inside another widget, I recommend using pack because you can do everything in a single line of code. Therefore, I recommend using pack rather than grid for the container itself:

container.pack(fill="both", expand=True)

Also, since your container seems to only have a single row and a single column, you probably don't want to give column 1 a weight.

Finally, you are also using grid to manage the widgets inside each page (N1, N2), but again, you are forgetting to give a weight to any rows or columns inside those frames.

You will need to apply grid_rowconfigure() and grid_columnconfigure() on, respectively, the rows and columns of the parent/main widget where you draw the children widgets.

Example:

Suppose on the main window you draw 2 buttons on the the first row and first 2 columns. You will need to apply the methods above like this:

    main_window.grid_rowconfigure(0, weight=1) # For row 0
    main_window.grid_columnconfigure(0, weight=1) # For column 0
    main_window.grid_columnconfigure(1, weight=1) # For column 1

The columns and rows of the parent/main window have a weight grid option associated with them. This option, which is by default set 0 (don't expand to fill space), tells how much the row/column should grow if there is extra room in the master to fill.

You need to configure the rows and columns to have a non-zero weight so that they will take up the extra space:

grid.columnconfigure(tuple(range(60)), weight=1)
grid.rowconfigure(tuple(range(30)), weight=1)

You also need to configure your buttons so that they will expand to fill the cell:

btn.grid(column=x, row=y, sticky="news")

This has to be done all the way up, so here is a full example:

from tkinter import *

root = Tk()
frame = Frame(root)
root.rowconfigure(0, weight=1)
root.columnconfigure(0, weight=1)
frame.grid(row=0, column=0, sticky="news")
grid = Frame(frame)
grid.grid(sticky="news", column=0, row=7, columnspan=2)
frame.rowconfigure(7, weight=1)
frame.columnconfigure(0, weight=1)

#example values
for x in range(10):
    for y in range(5):
        btn = Button(frame)
        btn.grid(column=x, row=y, sticky="news")

frame.columnconfigure(tuple(range(10)), weight=1)
frame.rowconfigure(tuple(range(5)), weight=1)

root.mainloop()

print(playarea.grid_size())

Return (0,0), as I configured columnspan and rowspan it should return me (10,20), no ?

No. grid_size returns the size (number of rows and columns) of the grid. This is how the computation of the value is made, according to the official tcl/tk documentation:

"The size is determined either by the slave occupying the largest row or column, or the largest column or row with a minsize, weight, or pad that is non-zero."

In your specific case you've only put widgets in row 0, column 0, so the reported size of (0,0) is correct.

print(newGameButton.winfo_width())

Return me 617px and the button is huge, I don't understand why, can someone explain how grid works ? What's causing this.

When you create a button with text but no image, the width is interpreted as a number of characters rather than pixels.

When there is extra space in a window managed by grid, it allocates that extra space to rows and columns that have a non-zero "weight". To get your rows and columns to expand, give them a non-zero weight.

for row in range(7):
    window.grid_rowconfigure(row, weight=1)
for col in range(3):
    window.grid_columnconfigure(col, weight=1)

Of course, adjust that to whatever number of rows and columns you're actually using. You can give different weights to cause some rows or columns to grow more than others. For example, a column with a weight of 3 will grow 3 times faster than a column with a weight of 1.

@frwol I got the solution for you,

First make a separate frame which will act as the background window (do not use pady or padx).

self._window = customtkinter.CTk()
frame = customtkinter.CTkFrame(master=self._window)
frame.grid(row=0, column=0)

Create all of your widgets/sub-frames inside that main frame and then add these lines in the end of your code:

frame.update_idletasks()
width = frame.winfo_width()
height = frame.winfo_height()
self._window.geometry(f"{width}x{height}")

Here is your modified example file