Layout

Working with Layout, Grid layout, Content push, Media ratio, RTL

Learn how to use Essential Grid’s layout tools in this guide.

Table of Contents

• Layout
• Boxed
• Fullwidth
• Grid Layout
• Even
• Masonry
• Collage
• Content Push
• Media Ratio X:Y
• RTL

Designing Grid Layouts

Essential Grid gives you a great deal of flexibility when designing the layout of your grids.
In this guide will be stepping through the core tools you are provided with to control layout, all found within five layout related panels in the** Settings** tab: Layout, Grid layout, Content push, Media ratio, RTL.

Layout Settings

The Layout panel is the first one in the** Settings** tab, and gives you a collection of high-level layout options to work with:
Let’s step through what each option does and how to configure it.

Layout

The Layout option determines how the outer container of a grid is sized within your content:
Three options are available: Boxed, Fullwidth

Boxed

A boxed grid fits itself to the container in which it sits.
For example if you add a grid to a post it will be the same width as the rest of the post:

The grid’s width, however, will depend on the height of your rows and how many rows there are.

Fullwidth

A full width grid expands itself to the size of the browser viewport:

Like a boxed grid, its height will depend on row height and count.

Grid Layout

The Grid Layout option controls how the grid items themselves will be sized:
Three options are available: Even, Masonry and Collage.

Even

In an even grid layout all items have exactly the same width and height:

Masonry

In a masonry grid layout all the items have the same width, but may have different heights:

Collage

In a Collage grid layout items can have different heights and widths.
However, these heights and widths are still constrained, in that their dimensions are defined by the number of rows and columns they span:

Content Push

The Content Push option becomes useful if you have an Even grid with items that become larger when you hover over them. It determines what happens to nearby website content when you hover over items on the bottom row of the grid.

If you set Content Push to Off, when you hover over a bottom row item it will overlap any website content placed immediately below the grid:

If you set Content Push to On, the hovered item will instead push any content below it further down:

Note: The** Content Push** option is available only if Grid Layout is set to Even.

Media Ratio:

The Media Ratio X:Y option controls the aspect ratio of a grid’s media, i.e. the images or videos that appear in a grid item:

The first field sets the media’s width, and the second field sets the height. For example, if you have a grid that will be showing a collection of 16:9 videos, you may wish to change the media ratio to also be 16:9.

RTL

Setting the RTL option to On makes column order flow from right to left:

Row order is unchanged.

Updated on: 25/06/2026