Rows and columns
Arrange blocks in a row or a column and control how they line up at different screen sizes.
Code name: Container · Category: Layout
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use a row to place service cards side by side, and a column to stack a heading, text and a button. Containers organise content inside a section.
In the editor
- Choose a row or column in Layers.
- Set alignment and wrapping for the row.
- Adjust the column sizes for mobile, tablet and desktop.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Container direction="row" alignRowVertical="stretch">
<Container direction="column" xs={12} md={6} lg={6}>
<Typography variant="h3">Strategy</Typography>
</Container>
<Container direction="column" xs={12} md={6} lg={6}>
<Typography variant="h3">Delivery</Typography>
</Container>
</Container>Behaviour and limitations
- Use alignRowVertical="stretch" on a row for equal-height children. Old fullHeight values are not the way to create this layout.
- xs, md and lg set column widths on a 12-column grid. They apply to columns; rows stretch across their parent.
- sm is retained in the catalog, but the current renderer uses xs for the small breakpoint.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
direction | See guidance | "column" (renderer) | direction. See the usage notes for this block. |
xs | number | 12 (renderer) | Mobile Size. See the usage notes for this block. |
sm | See guidance | Not declared here | sm. See the usage notes for this block. Catalog only: verify before use. |
md | number | 12 (renderer) | Tablet Size. See the usage notes for this block. |
lg | number | 12 (renderer) | Desktop Size. See the usage notes for this block. |
justifyContent | "center", "flex-start", "flex-end", "space-between", "space-around" | "center" (renderer) | Justify Content. See the usage notes for this block. |
alignRowVertical | "top", "center", "bottom", "stretch" | "center" (editor only) | Align Vertically. See the usage notes for this block. |
wrapRow | "wrap", "no wrap" | "wrap" (renderer) | Wrap inner elements. See the usage notes for this block. |
spacing | object | {} (renderer) | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
src | string | Not declared here | Background Image. See the usage notes for this block. |
backgroundColor | string | Not declared here | Background colour. Theme-derived appearance can still depend on the surrounding section. |
minHeight | number | 30 (renderer) | Min Height. See the usage notes for this block. |
maxWidth | number | Not declared here | Max Width. See the usage notes for this block. |
borderRadius | number | 0 (renderer) | Border Radius. See the usage notes for this block. |
borderColor | string | "" (renderer) | Border Color. See the usage notes for this block. |
animationType | "none", "fade-up", "fade-down", "fade-left", "fade-right", "flip-up", "flip-down", "flip-left", "flip-right", "zoom-in", "zoom-left", "zoom-right" | "" (renderer) | Entrance animation setting. Use a supported editor value; preserve it for unrelated edits. |
backdropFilter | number | 0 (renderer) | Glass effect. See the usage notes for this block. |
opacity | number | 0.8 (renderer) | Image Opacity. See the usage notes for this block. |
reverseRow | "none", "mobile", "tablet", "desktop" | "none" (renderer) | Reverse columns order. Smaller than:. See the usage notes for this block. |
priority | See guidance | false (renderer) | priority. See the usage notes for this block. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
enablePaddingTemplates | boolean | false (editor only) | Enable Responsive Padding. See the usage notes for this block. |
css | string | Not declared here | Custom CSS text. Preserve unrelated rules and prefer the dedicated property for supported edits. |
children | See guidance | Not declared here | Nested content between the opening and closing tags. Follow the block-specific example. |
Legacy compatibility
width, height, fullHeight are retained for compatibility. Preserve existing values unless the requested change requires migration; do not choose them for new content without checking the notes above.
Related blocks
Container Block
The Container block is your main layout organiser. It helps you arrange blocks in rows or columns, manage spacing, and add background colours or images so each section has its own look.
When to use it
Group multiple blocks together into a clean, structured section.
Build responsive multi-column layouts that adapt from mobile to desktop.
Add background colours, images, or full-height sections to frame your content.
Settings you can adjust
🧩 Layout & Alignment
Justify Content – Align items along the main axis (left, centre, right, or spaced out).
Align Vertically – For rows, control whether items sit at the top, middle, bottom, or stretch.
Wrap Inner Elements – Allow items to wrap to a new line when space runs out.
Reverse Columns Order (below breakpoint) – Choose a screen size where the column order flips (e.g. image above text on mobile).
Mobile / Tablet / Desktop Size – Set how many columns the container spans inside a row.
🎨 Background & Appearance
Background Image – Add an image that stretches edge to edge.
Image Opacity – Add an overlay to lighten or darken the image for better text readability.
Background Color – Fill the section with a solid colour or gradient.
Glass Effect – Apply a frosted, translucent look.
Border Color & Radius – Add a border and round the corners.
📏 Size & Spacing
Max Width – Limit how wide inner content can grow for easier reading.
Min Height – Set a minimum section height (e.g. for hero sections).
Full Height – Make the container match the viewport height.
Spacing – Adjust padding inside and margin outside the container for each device.
Enable Responsive Padding – Use preset spacing that adapts to different screen sizes.
✨ Visibility & Effects
Animation – Add a scroll-in animation for the whole section.
Hide on Screens – Hide the container on specific device sizes to create alternate layouts.
Tips & Ideas
Pair a Background Image with darker Image Opacity and light text for a striking hero section.
Use Reverse Columns Order to keep image-text layouts natural on mobile without duplicating content.
Combine Max Width with centred alignment for focused long-form content.
Stack multiple containers with different Spacing and Background Colors to create clear visual separation.
