How can I create this layout with Python3 using Tkinter with the grid geometry manager?

  python, python-3.x, tkinter, tkinter-layout

I am trying to create the following layout: Desired Layout

This is my code:

from . import FlowPane,JsonPane,PropertiesPane,ToolbarPane
import tkinter as tk

class ConflixEditor(tk.Tk):
    def __init__(self, args):
        super().__init__()
        self.__dict__.update({k: v for k, v in locals().items() if k != 'self'})
        self.minsize(width=1024, height=768)
        self.title('Conflix Editor')
        # Widget Creation
        self.frame = tk.Frame(self)
        self.toolbarPane = ToolbarPane.ToolbarPane(self.frame, bg='black')
        self.flowPane = FlowPane.FlowPane(self.frame, bg='red')
        self.propertiesPane = PropertiesPane.PropertiesPane(self.frame, bg='blue')
        self.jsonPane = JsonPane.JsonPane(self.frame, bg='green')
        # Widget Layout
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(2, weight=1)
        self.frame.grid(row=0, column=0, sticky=tk.N+tk.E+tk.S+tk.W)
        self.toolbarPane.grid(row=0, column=0, columnspan=3, rowspan=2, sticky=tk.N+tk.E+tk.W)
        self.flowPane.grid(row=2, column=0, columnspan=2, rowspan=5, sticky=tk.N+tk.S+tk.W)
        self.propertiesPane.grid(row=2, column=2, columnspan=1, rowspan=5, sticky=tk.N+tk.E+tk.S)
        self.jsonPane.grid(row=7, column=0, columnspan=3, rowspan=3, sticky=tk.E+tk.S+tk.W)

The constructors for FlowPane, JsonPane, PropertiesPane, ToolbarPane all take two parameters: the parent widget and the background color.

Instead of getting the desired result above, I am getting the following result: enter image description here

What am I doing wrong? How can I create the desired layout? Note that the background colors are just temporary to confirm that each widget is using the correct amount of space. This is eventually going to be an application for designing and building Netflix Conductor workflows. I want to have a toolbar with menus and buttons in the black area, a Canvas in the red area for displaying the flow-chart elements that represent tasks in the workflows, a Treeview for viewing properties in the blue area, and a Text Editor in the green area at the bottom for viewing/editing the raw JSON.

Source: Python-3x Questions

LEAVE A COMMENT