Python PyQt5 QGridLayout

PyQt5 Tutorials

About Lesson

In this Python PyQt5 lesson we are going to learn about Python PyQt5 QGridLayout, basically there are different types of layout management that you can use in PyQt5.we have QVBoxLayout, QHBoxLayout and QGridLayout. particularly in this lesson we are talking about GridLayout, so by using gridlayout you can align your widgets in row and columns. we create our layout in two ways, the first way is that we can do by coding and the second way is by using Qt Designer.

PyQt5 GridLayout by Coding

First we need to import our required classes and the important one is our PyQt5 QGridLayout, using QGridLayout class we can align our widgets in row and columns.

from PyQt5.QtWidgets import QApplication,QWidget, QGridLayout, QPushButton
import sys
from PyQt5.QtGui import QIcon

from PyQt5.QtWidgets import QApplication,QWidget, QGridLayout, QPushButton

import sys

from PyQt5.QtGui import QIcon

These are used for creating title, icon and the geometry of the window, basically the geometry of the window is the x,y position, width and height of the window.

self.setGeometry(200,200, 400,300)
self.setWindowTitle("PyQt5 GridLayout")
self.setWindowIcon(QIcon('python.png'))

self.setGeometry(200,200, 400,300)

self.setWindowTitle("PyQt5 GridLayout")

self.setWindowIcon(QIcon('python.png'))

This is the code that we have created our QGridLayout object.

 grid = QGridLayout()

1	grid = QGridLayout()

We are going to add eight QPushButton in our GridLayout, first you need to create the object of QPushButton.

btn1 = QPushButton("Click One")

1	btn1 = QPushButton("Click One")

After creating of your buttons, you need to add the buttons in GridLayout. you can use addWidget() method. you can see that we have added row and column number for every widget.

grid.addWidget(btn1, 0, 0)
grid.addWidget(btn2, 0, 1)
grid.addWidget(btn3, 0, 2)
grid.addWidget(btn4, 0, 3)
grid.addWidget(btn5, 1, 0)
grid.addWidget(btn6, 1, 1)
grid.addWidget(btn7, 1, 2)
grid.addWidget(btn8, 1, 3)

grid.addWidget(btn1, 0, 0)

grid.addWidget(btn2, 0, 1)

grid.addWidget(btn3, 0, 2)

grid.addWidget(btn4, 0, 3)

grid.addWidget(btn5, 1, 0)

grid.addWidget(btn6, 1, 1)

grid.addWidget(btn7, 1, 2)

grid.addWidget(btn8, 1, 3)

Now you need to set the layout for the main window, if you don’t do this you will not see any widgets in your window.

self.setLayout(grid)

1	self.setLayout(grid)

This is the code for How to Create GridLayout in PyQt5

from PyQt5.QtWidgets import QApplication,QWidget, QGridLayout, QPushButton
import sys
from PyQt5.QtGui import QIcon




class Window(QWidget):
    def __init__(self):
        super().__init__()

        self.setGeometry(200,200, 400,300)
        self.setWindowTitle("PyQt5 GridLayout")
        self.setWindowIcon(QIcon('python.png'))


        grid = QGridLayout()

        btn1 = QPushButton("Click One")
        btn2 = QPushButton("Click Two")
        btn3 = QPushButton("Click Three")
        btn4 = QPushButton("Click Four")
        btn5 = QPushButton("Click Five")
        btn6 = QPushButton("Click Six")
        btn7 = QPushButton("Click Seven")
        btn8 = QPushButton("Click Eight")

        grid.addWidget(btn1, 0, 0)
        grid.addWidget(btn2, 0, 1)
        grid.addWidget(btn3, 0, 2)
        grid.addWidget(btn4, 0, 3)
        grid.addWidget(btn5, 1, 0)
        grid.addWidget(btn6, 1, 1)
        grid.addWidget(btn7, 1, 2)
        grid.addWidget(btn8, 1, 3)

        self.setLayout(grid)





app = QApplication(sys.argv)
window = Window()
window.show()
sys.exit(app.exec_())

from PyQt5.QtWidgets import QApplication,QWidget, QGridLayout, QPushButton

import sys

from PyQt5.QtGui import QIcon

class Window(QWidget):

def __init__(self):

super().__init__()

self.setGeometry(200,200, 400,300)

self.setWindowTitle("PyQt5 GridLayout")

self.setWindowIcon(QIcon('python.png'))

grid = QGridLayout()

btn1 = QPushButton("Click One")

btn2 = QPushButton("Click Two")

btn3 = QPushButton("Click Three")

btn4 = QPushButton("Click Four")

btn5 = QPushButton("Click Five")

btn6 = QPushButton("Click Six")

btn7 = QPushButton("Click Seven")

btn8 = QPushButton("Click Eight")

grid.addWidget(btn1, 0, 0)

grid.addWidget(btn2, 0, 1)

grid.addWidget(btn3, 0, 2)

grid.addWidget(btn4, 0, 3)

grid.addWidget(btn5, 1, 0)

grid.addWidget(btn6, 1, 1)

grid.addWidget(btn7, 1, 2)

grid.addWidget(btn8, 1, 3)

self.setLayout(grid)

app = QApplication(sys.argv)

window = Window()

window.show()

sys.exit(app.exec_())

So run the complete code and this will be the result.

PyQt5 GridLayout By Qt Designer

Now we want to create our layout using Qt Designer , so you need to open your Qt Designer, you can write pyqt5designer in your terminal, after opening create a new Widget window. and add four QPushButton, after that select all buttons and right click on them choose Layout and Layout In a Grid.

After doing this your all widgets will be aligned in column and rows, also you need to do the same for the window, right click on the window and choose layout grid.

aave your ui file, iam going to call it gridlayout.ui , and copy the file in your working directory. now we are going to load our ui file. make a new python file and call it LoadGrid.py. we are going to use uic module for loading our ui file.

from PyQt5.QtWidgets import QApplication, QWidget
from PyQt5 import uic

class UI(QWidget):
    def __init__(self):
        super().__init__()

        uic.loadUi('gridlayout.ui', self)




app = QApplication([])
window = UI()
window.show()
app.exec_()

from PyQt5.QtWidgets import QApplication, QWidget

from PyQt5 import uic

class UI(QWidget):

def __init__(self):

super().__init__()

uic.loadUi('gridlayout.ui', self)

app = QApplication([])

window = UI()

window.show()

app.exec_()

Run the complete code and this is the result.