How Grid Works in Postcards

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.

Padding, margins, and borders

You can adjust the padding and margin of the entire Grid just like any other element in Postcards. Select the Grid itself (not an individual item), then use the right panel to control spacing around and inside the grid.

This is useful when you need more breathing room between the grid and surrounding content or want to fine-tune internal spacing.

You can also add borders to the Grid’s background to visually separate it from other sections. Border size can be set to a specific value by entering a number, or by clicking the border value field, holding the click, and dragging your mouse left or right to decrease or increase the value.

Each side of the border can be customized individually by clicking the downward arrow next to the border settings.

Refer to the image below to identify the supported grid options, and just under you’ll find how to use and apply them:

1. Alignments
2. Sizing options
3. Wrap count
4. Spacing
5. Collapse on mobile
6. 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:

1. Text
2. Image

With reverse order, they’ll appear like:

1. Image
2. 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).

Grid Styling Settings

In addition to layout and spacing controls, Grids also include visual styling options for backgrounds, borders, and shadows.

1. Backgrounds

Grids support background styling to help visually group content or separate sections within your template. You can apply a background to the entire Grid using either a color or an image, and it will appear behind all items inside the grid.

Background Color

Use a solid background color to create contrast, highlight a section, or visually separate the Grid from surrounding content. You can select any color and adjust its opacity to achieve subtle or more pronounced effects, making it easy to fine-tune how strong the background appears.

Background Image

A background image allows you to place an image behind all Grid items, which you can upload from your Image Library or directly from your computer. You can then adjust how the image is displayed and positioned using the available background image settings. This is useful for more visual layouts or branded sections where a simple color isn’t enough. The background image stays attached to the Grid itself, ensuring all items remain aligned and readable on top of it.

Note: Background images are not consistently supported across all email clients, so rendering results may vary depending on the client and device.

2. Border

You can also add a border to the entire Grid. Toggle the Border setting to enable it, then use the available options to choose the border style (solid, dotted, or dashed), adjust the border thickness, and set the border color. You can define different border thickness values for each side of the Grid by clicking the downward arrow and customizing each side individually.

3. Shadows

You can add a shadow to the entire Grid to create depth and visual separation. Click the small eye icon to enable the shadow, then click the Box Shadow field to open the shadow settings. From there, you can control the shadow’s position using the X and Y offset values, adjust the blur and spread, and choose a specific color for the shadow.

Note: Shadow effects are not consistently supported across all email clients, so rendering results may vary depending on the client and device.

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.