help center

On this page

Create a Grid container

Last Update: March 7, 2024

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

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

To create a Grid container:

  1. Open a page in Elementor Editor.
  2. Click the “+” sign on the canvas.
    Click the plus sign on the canvas Create a Grid container 1
  3. Select Grid.
    Select the grid layout Create a Grid container 3
  4. Select one of the grid layout options. For this demonstration, we’ll select a 4×4 grid.
    Select your grid structure Create a Grid container 5
    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.
  5. Select custom Row size in the Layout tab.
    Set the rows to 1fr Create a Grid container 7
  6. Set the two rows to 1fr.
  7. Drag a Text Editor widget into the first cell and enter the text, “A rose by any other name”. 
  8. 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.
    Dragging the first image widget Create a Grid container 9
  9. 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.
    Add the first text and image widgets Create a Grid container 11
  10. 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.
  11. Drag a container element to cell 4.
  12. 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.
    Switching the container to grid Create a Grid container 13
  13. 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.
    Changing the column setting in the layout tab Create a Grid container 15
    At this point you should have a four cell Grid Container, with cell 4 containing another four cell Grid Container.
    Outline of 4 cells with child container Create a Grid container 17
  14. Drag a Text Editor widget into cell 1 of this new container and enter the text “Small Bouquet $10”.
  15. Drag a Text Editor widget into cell 2 of the new container and enter the text “Large Bouquet $20”.
    Bottom two text widgets Create a Grid container 19
  16. Drag Image widgets to cells 3 and 4 with images of a small bouquet and and large bouquet respectively. 
  17. Tighten up the design by changing the height of the child Container Grid row to 1 fr.
    Change the height of the row to 1fr Create a Grid container 21
    Your entire grid should look like this:
    Final Create a Grid container 23

Next steps

Learn more about the Layout options and Style options available with Grid containers. 

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article