Creating a Grid container
Note: In this example, some element alignment has been changed, so your results may not look exactly like the example.
To create a Container Grid:
- 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: