Grid
A Grid is a layout container used to structure content in rows and columns. It helps organize elements in a clean and consistent way, especially useful for things like card layouts, feature sections, or lists of items.
When navigating through the Layers structure, hovering above or below a specific element will reveal a small plus (+) button. Clicking it will prompt a bubble of available elements that can be inserted - from here you’ll be able to choose Grid.
By default, the Grid comes with two items, each containing just a single text placeholder.
To start using it:
Simply drag and drop your own elements (images, text, etc.) from the Layer panel on the left side into each grid item. Also, feel free to delete text placeholders.
You should get a result similar to this:
The image appears on the right and all the text content is on the left.
Note:
In a Grid layout, the first item always appears on the left. This means the position of your content depends on the order of the items inside the Grid - first = left, second = right (on Desktop).
For example, if you move the text content into the first Grid item, then the text will appear on the left side.
The order of items inside the Grid defines how they appear:
- First item = left (on Desktop)
- Second item = right
- If you add a 3rd, 4th, or more items, they’ll continue below, wrapping into the next row depending on the grid settings.
To create a new Grid Item, you have two options:
- Click the (+) button between the “Grid” and “Item” layers (or between collapsed items). Just pick the element you want, and a new item will be added automatically.
- Or simply duplicate an existing item: Right-click on it and choose Duplicate, or use the shortcut Cmd+D (Mac) / Ctrl+D (Windows).
Each structural element contributes to the overall size of the email template. Avoid excessive nesting; this applies to both grids and groups, as it can negatively impact performance and maintainability.
Important: On mobile, the layout typically becomes vertical - items will stack one below the other, with the first item always on top.
Refer to the image below to identify the supported grid options, and just under you’ll find how to use and apply them:
- Alignments
- Sizing options
- Wrap count
- Spacing
- Collapse on mobile
- Reverse order on mobile
1. Alignments
Grid items are usually aligned to the top-left corner unless you tell them otherwise. That’s because top-left is the starting point in most layout systems.
You can change the alignment by clicking on the alignment name.
2. Sizing options
Hug: The grid (or the item inside it) will shrink to fit the content. If the content is small, the size is small.
Fill: The grid (or the item) will expand to fill the available space — stretching to match the container size.
3. Wrap count
Wrap count controls how many items fit per row before wrapping to the next line.
- If Wrap Count = 2, the grid shows 2 items per row. The 3rd item starts a new row.
- If Wrap Count = 3, you’ll only see the effect if there are 3 or more items. Otherwise, it behaves the same as if Wrap Count = 2.
4. Spacing
Auto spacing lets the system decide the spacing between items based on the overall layout.
If you want full control, you can set spacing manually (e.g., 40px).
Auto is useful when you want the grid to adapt to screen size without worrying about exact numbers.
5. Collapse on mobile
Collapse on Mobile - makes the grid switch from a horizontal layout (rows) to vertical (stack) on smaller screens.
It’s often used to make sure content is readable on phones - items are shown one under the other, rather than side-by-side.
6. Reverse order on mobile
This flips the order of the items only on mobile.
For example, if you have 2 items:
- Text
- Image
With reverse order, they’ll appear like:
- Image
- Text
Useful when the mobile layout needs to highlight different elements first (like putting the CTA - call to action at the top on small screens).
Item
A grid item is a single block inside the grid - like a “cell” where you place content (text, image, button, etc.).
Each item has its own alignments (1) and sizing options (2), so you can control the layout more precisely.
1. Alignments
Each grid item can also align the content inside it - for example, text or images inside a column.
Why it’s useful:
Sometimes, one item needs different behavior than another.
For example:
On the left: text should align to the Top Center
On the right: image should be to the Top Left
2. Sizing options
This defines how much of the container the item should occupy.
Every grid item has two main sizing options:
- Width
- Height
And each can be set to:
Hug: The item will shrink to fit the content inside.
Example: If there’s only a short text, the item will stay just as wide as that text.
Fill: The item will stretch to fill the available space in the grid.
Useful when you want elements to take equal width or adapt to the container.
Custom: You can also set a fixed size (e.g., 200px), if you want precise control.
Important (Fixed-Size Content)
If the grid item contains an element like an image with a fixed size, choosing Fill for the item won’t visually change anything.
That’s because the image itself doesn’t stretch - it keeps its own defined size, so the grid item wraps around that instead.
Example:
You apply Fill to an item that contains an image set to 150px width. The item tries to fill the space, but the image doesn’t stretch, so the item stays that size unless the image is set to auto/stretch too.
When working with a Grid layout, you may want to control how the entire grid sits inside the module. This is where grid alignment comes into play - letting you position your content to the left, center, or right within its container.
Use Grid alignment option when:
- The grid itself doesn’t stretch full width (i.e., it’s set to “Hug” or a smaller fixed size).
- The module or container has extra space around the grid.
Important Note:
If the grid or its items are already set to “Fill” the container, there won’t be any leftover space - so alignment controls won’t visibly affect anything.