Create a Grid container

Last Update: March 7, 2024

Grid containers are a fast way to build containers neatly divided into columns and rows.

info

Note

In this example, some element alignment has been changed, so your results may not look exactly like the example.

To create a Grid container:

Open a page in Elementor Editor.
Click the “+” sign on the canvas.
Select Grid.
Select one of the grid layout options. For this demonstration, we’ll select a 4×4 grid.

Note: A cell in a Grid Container can only contain one element, but there is a trick you can use to get around this limitation (discussed below).
To keep the design tight, change the height of the rows.
Select custom Row size in the Layout tab.
Set the two rows to 1fr.
Drag a Text Editor widget into the first cell and enter the text, “A rose by any other name”.
Drag an image widget into the second cell.
Note: When you want to add a widget to the flexbox, you need to drag it to the edge of the cell preceding it – e.g. if you want to add a widget to cell 2, drag it to the right edge of cell 1.
Add a picture of a rose to the Image widget.
Note: The Grid Container will automatically adjust the cell size to accommodate the Image widget. You can change the cell size by adjusting the size of the image.
Drag a Text Editor widget into the third cell and enter the text, “Would cost more anywhere else”.
Note: Again, you’ll need to drag the widget to the end of cell 2, even though its cell is on a different row.

For the fourth cell we want to add two Text Editor widgets and two image widgets. Since a cell can only hold one element, we’ll add a container element to the cell and then add widgets to the container.
Drag a container element to cell 4.
In order to keep our orderly design, we’ll make this child container a Grid Container. Because containers default to Flexbox, we’ll have to change the setting in the layout tab to Grid.
By default, switching a Flexbox container to a Grid will default to a 3×2 layout. Our design calls for a 2×2 layout. This can be done by changing the settings in the Layout tab.

At this point you should have a four cell Grid Container, with cell 4 containing another four cell Grid Container.
Drag a Text Editor widget into cell 1 of this new container and enter the text “Small Bouquet $10”.
Drag a Text Editor widget into cell 2 of the new container and enter the text “Large Bouquet $20”.
Drag Image widgets to cells 3 and 4 with images of a small bouquet and and large bouquet respectively.
Tighten up the design by changing the height of the child Container Grid row to 1 fr.

Your entire grid should look like this: