Simple CSS Grid For Elementor Documentation

The simple CSS grid for Elementor addon allows you to very easily use CSS Grid to create great looking layouts.

With a single click, you can have one of 64 pre-set grid layouts.

Used with containers, you can create your own custom layout.

The simple CSS grid is available on the following elements:

• Container
• Loop Grid
• Gallery
• Basic Gallery
• Portfolio
• Column*

*That's right. In the event you are working on a client website that's still using sections and columns, and you would like to add a grid layout without switching everything over to containers, it will work with columns.

In the playground below you can have a quick preview of what can easily be achieved from the Elementor editor!

Visit the playground directly.

Let's see how it all works!

Getting Started

First, download and install the plugin. This button will be a download link after you have purchased access. Be certain to be logged in with the email that made the purchase.

The first thing you will notice is that on the compatible elements, you will now have the Simple CSS Grid panel:

You don't see it? See why I can't see the Simple CSS Grid panel.

Clicking on it you will see all the available settings.

• Enable: Turn on to enable CSS Grid on this element
• Gap: The grid gap between the items
• Control Row Gap Separately: If you want to control horizontal and vertical grid gap independently, turn this on
• Min Height of Items: Set a min height on the items (optional in most cases)
• Layout: Choose the grid layout that you would like

After enabling Simple CSS Grid and selecting a grid layout, you might notice very little or no differences (in particular if you are working with a container). If the container is empty, almost nothing will change, visually. You will need to add enough elements within that container (be it other containers, or any elements) so that the grid will be filled.

The grid layouts

There are 64 grid layouts. You can preview the pattern of each one from their related image.

If you would like to see the layouts better (and larger), you can simply expand the settings panel:

You can also visit the Simple CSS Grid for Elementor playground.

Using with Containers

With containers, not only do you have one click access to the 64 predefined grid patterns, but you can also create your very own custom grid layout.

For this, you choose one of the first 12 options, so that you have an even grid of 1 to 12 items.

Of course choosing the 1x grid would not give you much creative freedom. The 1x grid is particularly useful to reset the grid to a very simple, stacked layout, on mobile.

Say you want a lot of flexibility in how your new custom gird is going to be laid out, so you choose Grid 12.

Now, you can go into the grid items directly, under the Advanced tab > Simple CSS Grid, and adjust how much space each one of them should occupy:

You will need enough items in the grid already to properly preview the results. Row span in particular won't really change anything if you only have one row.

So you can set each grid item to span the exact area you would like.

This works for containers as grid children, as well as any element at all (results may vary for some of them). It works with inner sections too, in case you need that.

Using with the Loop Grid

To successfully use with the loop grid, your loop template needs to be made so that it's layout and appearance can be flexible and adjust to different size 'boxes'.

Generally, this will mean making the featured image a background image of your container.

Then, you will probably want to make the entire container a link by changing it's tag to <a> here:

Then making it the post URL

From there, you can adjust however you want! Add the post title, make it show on hover only, add other post information, etc. As long as it will fit into your smallest grid item, your layout should work fine!

Limitations

With the container, you have to use the "boxed" layout. In the event you would like it to be full width, use "boxed" then set the "width" to "100%".

The Container Layout needs to be set to Flex (and not Grid) to avoid conflicts.

You can't use shape dividers on the same container where you have enabled Simple CSS Grid. If you require a shape divider there, simply wrap that container into a full width one, set its padding to 0, and set the shape dividers on that wrapper container.

With columns, you can't use a background overlay along with Simple CSS Grid. It will break the grid layout.

With the image gallery pro element, Simple CSS Grid isn't compatible with "justified" or "masonry" layouts. It's not compatible with "multiple" galleries either.

With the portfolio element, you can't use "masonry" layout.

Questions and Answers

Why can't I see the Simple CSS Grid panel

In some cases, the Simple CSS Grid accordion won't be present at all. This is when a setting, on the same element, is selected and is incompatible with Simple CSS Grid.

For example, the following:

On the Gallery element, if "multiple" is selected, or the layouts "masonry" or "justified", the Simple CSS Grid won't be available.

Ditto for the Portfolio element, if "masonry" is selected.

Ditto for the Loop Grid element, if "masonry" is selected.

Conclusion

I hope you find this documentation helpful.

If you have anymore questions, please ask in the comments!