Tkinter Grid Tutorial - GUI with Python

In this blog post we will learn how to use Tkinter's Grid geometry manager. We will also learn column and row spanning with examples.

In this blog, we will learn about Tkinter's grid, and how to use it to arrange widgets (GUI elements) on a tkinter window.

Introduction to Grid System

Tkinter has support for various "Geometry Managers", i.e. systems that allow you to position your widgets. In this tutorial, we will be discussing one such system, i.e. "Grid" geometry manager. If you are familiar with CSS grids, you will find it very easy to picture and understand Tkinter grid as well. Let's get started.

We can picture grid as a tabular structure, where we have rows and columns. We can then place the widgets in different cells, spanning multiple rows or columns as well. This allows us to accurately and conveniently place our widgets without worrying to much about the pixels and coordinates.

Tkinter Grid Example

Let's see with an example, create a new python file main.py and write the following code to initialize a tkinter object and placing some widgets via the grid system.

  import tkinter as tk
  window = tk.Tk()
  window.title("Python Grid Example")
  window.geometry("480x360") # Set the window size
 
  # Create some placeholder labels (widgets)
  text1 = tk.Label(window, text="Label 1")
  text2 = tk.Label(window, text="Label 2")
  text3 = tk.Label(window, text="Label 3")
  text4 = tk.Label(window, text="Label 4")
 
  # Place widgets in the grid using tkinter's grid manager
  text1.grid(row=0, column=0)
  text2.grid(row=1, column=0)
  text3.grid(row=0, column=1)
  text4.grid(row=1, column=1)
 
  # Start tkinter
  window.mainloop()

Run the code, by running command python main.py. A tkinter window will open up with output like this :

Here you can see the text1 widget is placed at 0,0 position cell, while the text4 widget is placed at 1,1 position cell.

Spanning rows and columns

Tkinter's Grid system also supports spanning. Spanning allows a widget to occupy(span) multiple cells in rows and/or columns. This is really useful when you want your widget to have height or width of multiple rows or columns. Grid Spanning works similar to how merging cells work in Spreadsheets.

Grid has two types of spanning :

• Row Spanning
• Column Spanning

You can use both in conjunction as well. Let's see with examples :

Grid Column Spanning Example

We can span a widget to multiple adjacent columns in grid layout. This is done using the columnspan attribute.

Create a new python file main_colspan.py and write the following code :

  import tkinter as tk
  window = tk.Tk()
  window.title("Grid Column Spanning")
  window.geometry("480x360") # Set the window size
 
  # Create some placeholder labels (widgets)
  text1 = tk.Label(window, text="Label 1")
  text2 = tk.Label(window, text="Label 2")
  text3 = tk.Label(window, text="Label 3")
  text4 = tk.Label(window, text="Label 4")
 
  # Place widgets in the grid using tkinter's grid manager
  text1.grid(row=0, column=0)
  text2.grid(row=1, column=0, columnspan=2)
  text3.grid(row=0, column=1)
 
  # Start tkinter
  window.mainloop()

Run the code, by running command python main.py. A tkinter window will open up with output like this :

Here you can see the text2 widget has spanned two columns in this case. This makes the text2 widget occupy the space of two adjacent cells.

Grid Row Spanning Example

We can span a widget to multiple adjacent rows in grid layout. This is done using the rowspan attribute.

Create a new python file main_rowspan.py and write the following code :

  import tkinter as tk
  window = tk.Tk()
  window.title("Grid Row Spanning")
  window.geometry("480x360") # Set the window size
 
  # Create some placeholder labels (widgets)
  text1 = tk.Label(window, text="Label 1")
  text2 = tk.Label(window, text="Label 2")
  text3 = tk.Label(window, text="Label 3")
  text4 = tk.Label(window, text="Label 4")
 
  # Place widgets in the grid using tkinter's grid manager
  text1.grid(row=0, column=0)
  text2.grid(row=1, column=0)
  text3.grid(row=0, column=1, rowspan=2)
 
  # Start tkinter
  window.mainloop()

Run the code, by running command python main.py. A tkinter window will open up with output like this :

Here you can see the text3 widget has spanned two rows in this case.

Conclusion

This post is part of a series of posts that will explain how to use Tkinter in Python GUI Programming. We gave you few examples on how to use Grid system, how to span between cells etc.

If you love this small tutorial, please give us a share or follow on Twitter.

Python Roadmap

@PythonRoadmap

·Follow

What is the primary purpose of the tkinter grid system? #pythonquiz #Python #pythonprogramming

0

Reply

Copy link

Read more on Twitter