How can we get a layout like this in tkinter using grid?

Question

I want a layout like this with the grid method where top part have 2 widgets that fill properly without overlapping and the bottom part have 3 widgets.

I tried using columnspan attribute but it was overlapping.

@MadPhysicist 1, 2, 1 doesn't make sense as a ratio on the bottom, it would make the middle one be as the two side ones together, could be 2x6 and then 3, 3 on top and 2, 2, 2 on bottom — Matiiss, Jul 23 '22 at 16:59

score 5 · Accepted Answer · answered Jul 23 '22 at 18:16

Use six columns. The two items at the top can take up 3 columns each, the items on the bottom take up two columns each.

import tkinter as tk

root = tk.Tk()
f1 = tk.Frame(root, width=100, height=100, background="red")
f2 = tk.Frame(root, width=100, height=100, background="orange")
f3 = tk.Frame(root, width=100, height=100, background="yellow")
f4 = tk.Frame(root, width=100, height=100, background="green")
f5 = tk.Frame(root, width=100, height=100, background="blue")

f1.grid(row=0, column=0, columnspan=3, sticky="nsew")
f2.grid(row=0, column=3, columnspan=3, sticky="nsew")
f3.grid(row=1, column=0, columnspan=2, sticky="nsew")
f4.grid(row=1, column=2, columnspan=2, sticky="nsew")
f5.grid(row=1, column=4, columnspan=2, sticky="nsew")

root.grid_columnconfigure((0,1,2,3,4,5), weight=1)
root.grid_rowconfigure((0,1), weight=1)

root.mainloop()

How can we get a layout like this in tkinter using grid?

1 Answers1