Keep GUI in order: Tkinter Grid layout

Introduction:

Ok, this is going to be a short article. In this one, I am about to tell you about grid in Tkinter window object and how you can use it to place the widgets according to your needs in the window.

What is a grid in Tkinter 🤔❓

You can consider a grid in Tkinter as an intersection of horizontal and vertical lines, making boxes which can store widgets to store data. It is just like the spreadsheet in MS Excel or Google Sheets.

How to grab one of them 🤔❓

To grab one of the grid box and put content in it, you just have to use this syntax:-

label = tkinter.Label(window, text = "Widget")

label.grid(row = 1, column = 1)

The above label would be placed in the 1st row of the first column. Remember, row and column values start at 0, thus the label would be placed in the 2nd row and column of the window.

The window would create rows and column as per the requirement of the content. This process is done using the grid() method. We also have to mention the window object in the declaration of the widget. We don't need the pack method since the rendering is done by the grid method itself.

Making a layout using grid😄❕

Enough talking, let's make something to understand the point of using the grid method.

# import tkinter module
from tkinter import * from tkinter.ttk import *

# creating main tkinter window/toplevel
master = Tk()

# this will create a label widget
l1 = Label(master, text = "Height")
l2 = Label(master, text = "Width")

# grid method to arrange labels in respective
# rows and columns as specified
l1.grid(row = 0, column = 0, sticky = W, pady = 2)
l2.grid(row = 1, column = 0, sticky = W, pady = 2)

# entry widgets, used to take entry from user
e1 = Entry(master)
e2 = Entry(master)

# this will arrange entry widgets
e1.grid(row = 0, column = 1, pady = 2)
e2.grid(row = 1, column = 1, pady = 2)

# checkbutton widget
c1 = Checkbutton(master, text = "Preserve")
c1.grid(row = 2, column = 0, sticky = W, columnspan = 2)

# adding image (remember image should be PNG and not JPG)
img = PhotoImage(file = r"C:\Users\Admin\Pictures\capture1.png")
img1 = img.subsample(2, 2)

# setting image with the help of label
Label(master, image = img1).grid(row = 0, column = 2,
    columnspan = 2, rowspan = 2, padx = 5, pady = 5)

# button widget
b1 = Button(master, text = "Zoom in")
b2 = Button(master, text = "Zoom out")

# arranging button widgets
b1.grid(row = 2, column = 2, sticky = E)
b2.grid(row = 2, column = 3, sticky = E)

# infinite loop which can be terminated
# by keyboard or mouse interrupt
mainloop()

This is the GUI that is rendered by running the code:-

I know I used some of the features of Tkinter that I have not discussed yet but I though this is the perfect oppurtunity to provide a preview of the later posts.

This is a grid with 3 rows and 4 columns. The Entry label, i.e the input box is spanned to two columns while the others are the kept in only one column. The image is also spanned, but it is spanned in both row and column, making a square image.

Conclusion:-

This was it guys, it was everything about the Tkinter grid tutorial. I have also started learing flask so maybe the next post is going to be about Flask framework in Python. Hope you would enjoy that as well.
Follow me for more content like this, and subscribe to my newsletter so that you never miss anything I post.

Hope you have a great day😉.