ColContainer/V1

Columns using a 12-grid system. Must be inside a RowContainer.

Basic Structure

JSON 
{
  "type": "ColContainer/V1",
  "id": "6Z-xxxxx-0",
  "version": 0,
  "parentId": "row-id",
  "fractionalIndex": "a0",
  "params": {
    "mdNum": 12,
    "colDirection": "left"
  },
  "children": []
}

12-Grid System

The mdNum property controls column width based on a 12-column grid:

mdNum Width Use Case
12 100% Full width
9 75% Main content area
8 66.67% Two-thirds width
6 50% Half width
4 33.33% One-third width
3 25% Sidebar
2 16.67% Small column
i
Tip: Column mdNum values in a row should add up to 12 for proper layout.

Column Direction

The colDirection property controls content alignment:

Value Description
left Content aligned left (default)
center Content centered
right Content aligned right

Full Example

Column with background, border, and styling:

JSON 
{
  "type": "ColContainer/V1",
  "id": "6Z-CoLaB-0",
  "version": 0,
  "parentId": "6Z-RoWaB-0",
  "fractionalIndex": "a0",
  "attrs": {
    "style": {
      "padding-top": 20,
      "padding-bottom": 20,
      "margin-top": 0,
      "border-radius": 8
    },
    "data-skip-background-settings": "false",
    "data-skip-shadow-settings": "false",
    "data-skip-corners-settings": "false"
  },
  "params": {
    "mdNum": 6,
    "colDirection": "center",
    "padding-top--unit": "px",
    "padding-bottom--unit": "px",
    "margin-top--unit": "px",
    "--style-padding-horizontal": 20,
    "--style-padding-horizontal--unit": "px",
    "--style-background-color": "#f8fafc",
    "border-radius--unit": "px"
  },
  "children": []
}

Column Children

Columns can contain:

  • Elements (Headline, Button, Image, etc.)
  • FlexContainer for flexible layouts
JSON 
{
  "type": "ColContainer/V1",
  "params": { "mdNum": 12 },
  "children": [
    {
      "type": "Headline/V1",
      "fractionalIndex": "a0"
    },
    {
      "type": "Paragraph/V1",
      "fractionalIndex": "a1"
    },
    {
      "type": "FlexContainer/V1",
      "fractionalIndex": "a2",
      "children": [
        { "type": "Button/V1", "fractionalIndex": "a0" },
        { "type": "Button/V1", "fractionalIndex": "a1" }
      ]
    }
  ]
}