---
url: >-
  https://plugin.stripo.email/extensions/reference/modification/MultiRowStructureModifier.md
---
# MultiRowStructureModifier

Interface for creating and modifying email structure layouts.

```typescript
interface MultiRowStructureModifier
```

## Description

`MultiRowStructureModifier` provides high-level methods to manage email structure containers, handling the intricate details of email-compatible HTML generation.

## Import

```typescript
import { MultiRowStructureModifier } from '@stripoinc/ui-editor-extensions';
```

## Access

Access the `MultiRowStructureModifier` through the `HtmlNodeModifier`:

```typescript
const structureModifier = modifier
    .modifyHtml(structureNode)
    .multiRowStructureModifier();
```

## Methods

### updateLayoutWithContent()

Creates a new structure with specified containers and content.

```typescript
updateLayoutWithContent(
    layout: StructureLayout[], 
    containerContent: string[]
): HtmlNodeModifier
```

#### Parameters

| Parameter          | Type                                                                  | Description                                                     |
|--------------------|-----------------------------------------------------------------------|-----------------------------------------------------------------|
| `layout`           | [`StructureLayout[]`](/extensions/reference/types/StructureLayout.md) | Array of container configurations defining the structure layout |
| `containerContent` | `string[]`                                                            | Array of HTML content strings for containers content            |

#### Returns

[`HtmlNodeModifier`](./HtmlNodeModifier.md) for method chaining

#### Description

This method completely replaces the existing structure with a new layout defined by the container configuration and content distribution. It handles:

* Responsive design implementation
* MSO/Outlook compatibility
* Automatic image resizing
* Proper DOM positioning
* Content distribution to content containers only

#### Usage Notes

* Content is only placed in content containers
* Empty and spacer containers do not receive content
* Number of content strings can be less than content containers (remaining will be empty)
* Excess content is wrapped to the next line as a new structure

#### Example

```typescript
// Create a three-column layout with mixed container types
structureModifier.updateLayoutWithContent(
    [
        {width: '15%', contentType: 'SPACER'},  // Left margin
        '35%',                                   // Content column 1
        {width: '15%', contentType: 'EMPTY'},    // Placeholder for d&d content
        '35%'                                    // Content column 2
    ],
    [
        `<${BlockType.BLOCK_TEXT}>
            <p>Content 1</p>
        </${BlockType.BLOCK_TEXT}>`,
        
        `<${BlockType.BLOCK_TEXT}>
            <p>Content 2</p>
        </${BlockType.BLOCK_TEXT}>`
    ]
);
```

***

### updateLayout()

Modifies the container layout while preserving existing content.

```typescript
updateLayout(layout: StructureLayout[]): HtmlNodeModifier
```

#### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| `layout` | [`StructureLayout[]`](/extensions/reference/types/StructureLayout.md) | New container layout configuration |

#### Returns

[`HtmlNodeModifier`](./HtmlNodeModifier.md) for method chaining

#### Description

This method changes the container arrangement of the current structure without losing existing content. Content is redistributed among the new container layout with intelligent handling of mismatches.

#### Content Redistribution Rules

1. **More containers than content**: Empty containers are added
2. **Fewer containers than content**: Excess content is wrapped to the next line as a new structure
3. **Same number**: Content is mapped one-to-one
4. **Empty/Spacer containers**: Do not receive redistributed content

#### Example

```typescript
// Convert two-column to three-column layout
structureModifier.updateLayout(['33%', '34%', '33%']);

// Add margins with spacers
structureModifier.updateLayout([
    {width: '30%', contentType: 'SPACER'},
    '40%',
    {width: '30%', contentType: 'SPACER'}
]);
```