Tkinter frame not sized properly

The custom navbar is not stretching across the whole window

I’ve tried to change the grid values and packing it instead but because of grid pack won’t work. I’m quite new to gui python apps in general and am trying to make a program I made a gui. I believe this is to do with grid, as it’s not the most intuitive thing to me. The code is as follows:

import customtkinter as ctk

from ui.NavBar import NavBar


# --------------------- Window ---------------------
class App(ctk.CTk):
    def __init__(self):
        super().__init__()
        self.WIDTH = 800
        self.HEIGHT = 600

        self.geometry(f"{self.WIDTH}x{self.HEIGHT}")
        self.overrideredirect(True)
        ctk.set_default_color_theme("green")

        self.navbar = NavBar(root=self, width=self.WIDTH, height=self.HEIGHT / 10, fg_color="#1f1b1b")  # #242424
        self.navbar.grid(row=0, column=1, padx=0, pady=0, sticky="nsew")
        self.navbar.columnconfigure(0, weight=1)
        print(self.navbar.winfo_width())

        self.sizelabel = ctk.CTkLabel(self, text=str(self.navbar.winfo_height()), width=100, height=100)
        self.sizelabel.place(x=200, y=200)
        print(self.winfo_width())


# --------------------- NavBar ---------------------
class NavBar(ctk.CTkFrame):
    def __init__(self, root, **kwargs):
        super().__init__(root, **kwargs)

        self.root = root

        self.title = ctk.CTkLabel(self, text="SFXDownloader", font=('Helvetica', 18, 'bold'),
                                  height=self.root.HEIGHT / 10, width=600,
                                  bg_color="#1f1b1b")
        self.title.grid(row=0, column=0, padx=0, sticky=ctk.W + ctk.E)

        self.button = ctk.CTkButton(self, text="X", font=('Helvetica', 18, 'bold'), command=self.root.quit,
                                    fg_color="#1f1b1b", hover_color="darkred", height=self.root.HEIGHT / 10,
                                    width=self.root.HEIGHT / 10)
        self.button.grid(row=0, column=1, padx=0, sticky=ctk.E)


if __name__ == "__main__":
    app = App()
    app.mainloop()

This is what the window looks like, the darker bar should stretch across the screen:

Any help is appreciated

>Solution :

You haven’t told grid how to allocate extra space in the root window. You need to give a positive weight to at least one column for the extra space to be used.

For example, you can add this somewhere in App.__init__:

self.columnconfigure(1, weight=1)

However, if you ever put something in column 0 then it won’t span the whole window. It might be better to put it in column 0 and have it span as many columns as your whole UI is going to take. Then, just make sure you give the weight to whichever column(s) that need to get the extra space.

Arguably, an even better solution might be to use pack to put the navbar at the top, and then create a frame right below it to contain everything else. You can then use grid inside the frame without having to worry about columns in the root window.