Group

Group is a container that arranges child elements in a grid layout. It's essential for creating responsive, dynamic layouts that adapt to varying content.

For comprehensive layout documentation, see Layout System.

Use Cases

Multi-column layouts
Card containers
Side-by-side elements
Complex nested structures

Editor Settings

Click the Advanced button to open the Group editor:

Setting	Description
Columns	Number of columns in the grid
Rows	Number of rows in the grid
Gap	Spacing between cells (in pixels)
Padding	Internal padding (in pixels)

Column and Row Size Options

In the Group editor, each row and column can be set to:

Option	Meaning
Fill container	Equal share of remaining space
Fixed	Exact pixel value
Hug content	Fit to content

Placing Child Elements

Use the Add Element dropdown to add fields to the grid
Drag elements to position them in cells
Resize elements to span multiple cells

Sizing Behavior

Mode	Effect
Fixed	Group has exact pixel dimensions
Hug	Group shrinks to fit its content
Fill	Fills parent container (only when nested)

API Content Format

Groups accept nested objects where keys match child field keys:

{
  "content": {
    "product_card": {
      "product_image": "https://example.com/product.jpg",
      "product_name": "Widget Pro",
      "product_price": "$49.99"
    }
  }
}

Examples

For detailed layout patterns and configurations, see Layout System - Common Patterns.

Quick Reference:

Pattern	Configuration
Two-Column (Image + Text)	2 cols: Fixed + Fill container
Card (Header + Body)	2 rows: Hug content + Fill container
Three-Column Comparison	3 cols: All Fill container
Sidebar Layout	2 cols: Fixed + Fill container

Best Practices

See Layout Tips for more detail

Group

On this page