RowContainer/V1

Horizontal containers with fixed widths that hold columns. Must be inside a SectionContainer.

Basic Structure

JSON

{
  "type": "RowContainer/V1",
  "id": "6Z-xxxxx-0",
  "version": 0,
  "parentId": "section-id",
  "fractionalIndex": "a0",
  "attrs": {
    "style": { "width": "1170px" }
  },
  "params": {},
  "children": []
}

Common Widths

Width	Description
`1170px`	Standard wide layout (default)
`960px`	Medium width layout
`800px`	Narrow layout
`100%`	Full width of parent

Tip: Use percentage width units when you want the row to be responsive to the section width.

Full Example

Row with background and spacing:

JSON

{
  "type": "RowContainer/V1",
  "id": "6Z-RoWaB-0",
  "version": 0,
  "parentId": "6Z-SeCti-0",
  "fractionalIndex": "a0",
  "attrs": {
    "style": {
      "width": "1170px",
      "padding-top": 20,
      "padding-bottom": 20,
      "margin-top": 0
    },
    "data-skip-background-settings": "false",
    "data-skip-shadow-settings": "false",
    "data-skip-corners-settings": "false"
  },
  "params": {
    "padding-top--unit": "px",
    "padding-bottom--unit": "px",
    "margin-top--unit": "px",
    "--style-padding-horizontal": 15,
    "--style-padding-horizontal--unit": "px",
    "--style-background-color": "transparent"
  },
  "children": [
    {
      "type": "ColContainer/V1",
      "id": "6Z-CoLaB-0",
      "version": 0,
      "parentId": "6Z-RoWaB-0",
      "fractionalIndex": "a0",
      "params": { "mdNum": 12, "colDirection": "left" },
      "children": []
    }
  ]
}

Column Layouts

Rows contain ColContainer children. Common column configurations:

Single Column (100%)

JSON

{
  "children": [
    { "type": "ColContainer/V1", "params": { "mdNum": 12 } }
  ]
}

Two Columns (50/50)

JSON

{
  "children": [
    { "type": "ColContainer/V1", "params": { "mdNum": 6 }, "fractionalIndex": "a0" },
    { "type": "ColContainer/V1", "params": { "mdNum": 6 }, "fractionalIndex": "a1" }
  ]
}

Three Columns (33/33/33)

JSON

{
  "children": [
    { "type": "ColContainer/V1", "params": { "mdNum": 4 }, "fractionalIndex": "a0" },
    { "type": "ColContainer/V1", "params": { "mdNum": 4 }, "fractionalIndex": "a1" },
    { "type": "ColContainer/V1", "params": { "mdNum": 4 }, "fractionalIndex": "a2" }
  ]
}

Sidebar Layout (25/75)

JSON

{
  "children": [
    { "type": "ColContainer/V1", "params": { "mdNum": 3 }, "fractionalIndex": "a0" },
    { "type": "ColContainer/V1", "params": { "mdNum": 9 }, "fractionalIndex": "a1" }
  ]
}