This procedure is intended for Page Designer administrators who need additional control over the structure and arrangement of components within a page.

Grid Layout Components are layout components. They do not create visitor-facing content themselves. Instead, they divide an available area into columns into which other Page Designer components can be inserted.

Component Objective

Grid Layout Components provide an additional level of flexibility when building Page Designer pages.

A Grid divides an available area into a predefined responsive structure.

Once the Grid has been added, its individual Columns become available in the Page Structure. Administrators can then add components into those columns.

The basic structure is:

Main Region or Boxed Layout

↓

Grid

↓

Columns

↓

Components

The Grid therefore acts as a container for other Page Designer components.

Available Grid Layouts

Six Grid layouts are available.

Each layout already defines how its columns are organized on mobile and on desktop/tablet.

Grid Layout	Mobile	Desktop / Tablet
1 Row x 1 Col (Mobile, Desktop)	1 row × 1 column	1 row × 1 column
2 Row x 1 Col (Mobile), 1 Row x 2 Col (Desktop)	2 rows × 1 column	1 row × 2 columns
2 Row x 2 Col (Mobile), 1 Row x 4 Col (Desktop)	2 rows × 2 columns	1 row × 4 columns
2 Row x 3 Col (Mobile), 1 Row x 6 Col (Desktop)	2 rows × 3 columns	1 row × 6 columns
3 Row x 1 Col (Mobile), 1 Row x 3 Col (Desktop)	3 rows × 1 column	1 row × 3 columns
3 Row x 2 Col (Mobile), 2 Row x 3 Col (Desktop)	3 rows × 2 columns	2 rows × 3 columns

Choose the Grid according to the structure required across desktop/tablet and mobile.

Understanding Grid Columns

Once a Grid is added, Page Designer exposes its individual Columns in the Page Structure.

For example, a six-column Grid exposes:

• Column 1
• Column 2
• Column 3
• Column 4
• Column 5
• Column 6

Components can then be added to the required columns.

The Grid controls the responsive structure, while the components inserted into those columns provide the actual content.

Placement and Compatibility

Grid Layout Components can be used within:

• Main Region
• Boxed Layout

This gives administrators additional flexibility when a simple linear sequence of components is not sufficient for the intended page design.

A Grid can therefore be used to introduce a multi-column structure within a wider page composition.

Adding Components to a Grid

Grid columns provide areas into which Page Designer components can be added.

This creates significant design flexibility.

However:

The fact that a component can be inserted into a Grid does not mean that every Grid size is appropriate for that component.

Administrators must consider how much space the selected Grid gives to each component.

Use Common Sense When Selecting Components

Some components work comfortably in relatively small areas.

Other components require considerably more horizontal space.

As the number of columns increases, the amount of available space for each individual component decreases.

For example, a component placed inside a wide two-column structure has more room than the same component placed into one area of a six-column structure.

Always consider whether the component being inserted can work effectively within the available area.

Do not select a Grid solely because it creates the desired number of columns.

The content placed inside those columns must also remain usable and visually appropriate.

Responsive Structure

The Grid layout names explicitly describe their mobile and desktop behavior.

For example:

2 Row x 1 Col (Mobile), 1 Row x 2 Col (Desktop)

means:

Desktop / Tablet

Two columns appear on one row.

Mobile

The same structure becomes two rows with one column.

The responsive behavior is therefore part of the selected Grid itself.

Administrators should consider both presentations before choosing a Grid.

Grid Layouts and Horizontal Spacing

Horizontal Spacing can be used where appropriate to provide additional breathing room within the overall composition.

Use dedicated spacing components when intentional separation is required rather than manufacturing layout spacing through blank lines inside text content.

As with any component inserted into a Grid, consider the available space and overall responsive presentation.

Versatility

Grid Layout Components provide a high level of versatility because they allow other components to be organized into predefined responsive structures.

They can be used to create compositions containing different Page Designer components according to the intended page design.

However, this versatility should not be interpreted as unlimited freedom.

The administrator still needs to consider:

• Available width
• Component complexity
• Number of columns
• Desktop presentation
• Mobile presentation
• Overall readability
• Responsive behavior

The more complex the Grid becomes, the more important these considerations are.

Grid Nesting

Grid nesting requires particular caution.

Avoid placing Grids inside other Grids.

Although Page Designer may allow nested structures to be created, this does not mean that the resulting composition will remain responsive.

In particular, even two Grid levels nested into each other can create responsiveness problems.

A component inserted inside the second nested Grid can display very poorly because its available space has been constrained multiple times.

Avoid Infinite Nested Grids

Do not create increasingly complex structures such as:

Grid

↓

Column

↓

Grid

↓

Column

↓

Grid

↓

Component

This should not be treated as a way to gain unlimited control over page layout.

Each additional Grid level further constrains the content and increases the risk of poor responsive behavior.

If the intended design requires repeated Grid nesting to work, reconsider the page structure instead.

Grid Is a Layout Component

The Grid does not create content itself.

Its purpose is to create columns that contain other Page Designer components.

Use Grid in Main Region or Boxed Layout

Grid Layout Components can be used within:

• Main Region
• Boxed Layout

Choose the surrounding structure according to the overall page composition.

Technical Compatibility Does Not Guarantee Good Design

A component may technically be insertable into a Grid column while still being inappropriate for the amount of available space.

Always evaluate the component itself before deciding to place it in a Grid.

Be Particularly Careful With Narrow Columns

Layouts containing several columns create less horizontal space for each individual component.

Do not squeeze complex or space-intensive components into small areas.

Consider Mobile Before Choosing a Grid

Do not select a Grid based only on its desktop appearance.

Each Grid has a predefined mobile structure.

Review both before choosing the layout.

Avoid Nested Grids

Do not use Grid inside Grid as a standard design technique.

Even two nested Grid levels can cause responsiveness problems.

Components inserted into the second Grid can display very poorly.

Do Not Create Infinite Nested Structures

Additional nesting does not automatically create additional useful flexibility.

Excessive nesting increases layout complexity while reducing the available space for the actual content.

Use Spacing Deliberately

Horizontal Spacing can be used where appropriate to give the composition additional breathing room.

Do not manufacture spacing using empty lines inside text components.

1. Determine Whether a Grid Is Required

Review the intended page composition.

Use a Grid when the page requires a predefined multi-column structure that cannot be achieved through a simple linear sequence of components.

Remember that the Grid is a container.

The actual content will be provided by components inserted into its columns.

2. Choose the Parent Placement

Determine whether the Grid should be added within:

• Main Region
• Boxed Layout

Choose according to the overall structure of the page.

3. Determine the Required Desktop Structure

Consider how many columns the content should occupy on desktop/tablet.

Available desktop/tablet structures include:

• 1 row × 1 column
• 1 row × 2 columns
• 1 row × 3 columns
• 1 row × 4 columns
• 1 row × 6 columns
• 2 rows × 3 columns

Do not choose solely based on the number of available spaces.

Consider whether the intended components will have enough room within those spaces.

4. Review the Corresponding Mobile Structure

Before selecting the Grid, review how that same Grid behaves on mobile.

Depending on the selected Grid, the mobile presentation can become:

• 1 row × 1 column
• 2 rows × 1 column
• 2 rows × 2 columns
• 2 rows × 3 columns
• 3 rows × 1 column
• 3 rows × 2 columns

Make sure that the predefined mobile arrangement is appropriate for the intended content.

5. Select the Appropriate Grid Layout

Choose one of the six available layouts:

1. 1 Row x 1 Col (Mobile, Desktop)
2. 2 Row x 1 Col (Mobile), 1 Row x 2 Col (Desktop)
3. 2 Row x 2 Col (Mobile), 1 Row x 4 Col (Desktop)
4. 2 Row x 3 Col (Mobile), 1 Row x 6 Col (Desktop)
5. 3 Row x 1 Col (Mobile), 1 Row x 3 Col (Desktop)
6. 3 Row x 2 Col (Mobile), 2 Row x 3 Col (Desktop)

Select the Grid whose desktop and mobile structures best match the intended page composition.

6. Add the Grid

Drag and drop the selected Grid into the Main Region or Boxed Layout.

Once added, expand the Grid in the Page Structure.

The available Columns will appear underneath it.

7. Review the Available Columns

Confirm that the Grid exposes the expected number of columns.

For example, a six-area Grid will expose:

• Column 1
• Column 2
• Column 3
• Column 4
• Column 5
• Column 6

These columns are the areas into which the actual content components will be inserted.

8. Determine Which Component Belongs in Each Column

Plan the content before populating the Grid.

For each column, determine which Page Designer component should be inserted.

Consider:

• How much space the component requires
• How much text it contains
• Whether it contains imagery
• Whether it contains CTAs
• Whether its own design requires significant horizontal space
• How it will behave when the Grid reorganizes on mobile

9. Add Components to the Columns

Add the required component into each intended Grid column.

Continue until the required composition has been created.

Do not feel obligated to fill a column with a complex component simply because the space exists.

The resulting design should remain readable and usable.

10. Evaluate the Available Space

Review each inserted component within its Grid column.

Ask:

• Does the component have enough horizontal space?
• Is the content readable?
• Does the visual still work?
• Does the component feel squeezed?
• Is the selected Grid appropriate for this type of content?

If the answer is no, reconsider either:

• The component
• The selected Grid
• The overall page structure

Do not force an unsuitable component into a narrow column.

11. Add Horizontal Spacing Where Appropriate

If the composition requires additional breathing room, use Horizontal Spacing where appropriate.

Choose the spacing deliberately according to the relationship between the surrounding content.

Do not add blank lines inside text components simply to manufacture additional space.

12. Avoid Adding Another Grid Inside the Grid

Before creating additional nested structure, reconsider whether another Grid is genuinely necessary.

Avoid:

Grid → Column → Grid → Column → Component

Even a second Grid level can create poor responsive behavior.

Do not continue nesting additional Grids to achieve increasingly small layout areas.

13. Review the Overall Grid Structure

Before completing the page, confirm that:

• The Grid is placed within Main Region or Boxed Layout.
• The selected Grid provides the required desktop structure.
• The corresponding mobile structure is appropriate.
• Components have been inserted into the intended columns.
• Each component has sufficient room.
• Complex components have not been squeezed into unsuitable spaces.
• Horizontal Spacing is used appropriately where required.
• Grid nesting has been avoided.
• The structure remains understandable and manageable.

14. Apply Component Configurations

When configuring the individual components inserted into the Grid, click Apply as required to save their configurations.

Complete the Grid composition before moving to final validation.

15. Validate on Staging

Validate the completed page on the appropriate staging storefront.

Do not validate the Grid only from the Page Designer structure.

The final responsive presentation must be checked on staging.

On Desktop / Tablet

Confirm that:

• The Grid displays according to the selected desktop/tablet structure.
• The expected number of columns and rows is displayed.
• Components appear in the intended positions.
• Each component has sufficient space.
• Text remains readable.
• Images and other media display appropriately.
• No component appears squeezed or broken.
• Spacing between content is appropriate.

On Mobile

Confirm that:

• The Grid reorganizes according to its predefined mobile structure.
• Components remain readable and usable.
• Content appears in an appropriate responsive arrangement.
• Components do not become excessively constrained.
• Spacing remains appropriate.
• No nested structure causes poor rendering.

If a component displays poorly on mobile, reconsider the Grid structure rather than assuming that technical compatibility means the composition should be kept.

The key principle is:

Grid Layout Components provide additional flexibility, but that flexibility must be used with common sense. Choose the Grid based on both desktop and mobile behavior, give inserted components enough space, and avoid nested Grids because additional nesting can severely damage responsiveness.