The Container block in Frontly is a flexible layout element designed to help you structure and organize your page content. Think of it as a visual “div” — a block that can exist on its own or act as a parent for one or more other blocks, including additional container blocks.
Like all blocks in Frontly, the container block includes access to styling and display conditions, giving you complete control over its appearance and visibility across your app.
Notable Features
📐 Row vs Column Layout
A key setting inside the container block’s Styles tab is the layout orientation. You’ll choose whether the container acts as a:
Row — blocks placed inside stack horizontally
Column — blocks placed inside stack vertically
This foundational setting plays a big role in how your page layout behaves, especially when nesting other blocks within.
🔲 Nesting and Layer Control
You can drag and drop other blocks into or out of a container directly within the page editor.
For precision, use the Layers panel to manipulate the block hierarchy — especially useful for complex nested layouts involving multiple containers.
🎨 Container Layout Styling
Don't overlook the additional styling controls under the Container Layout section.
These settings allow you to:
Adjust alignment (horizontal & vertical)
Set gap spacing between blocks
Control wrapping behaviour for responsiveness
Add background images to create custom visual effects
These options give you greater design freedom and control, especially when building reusable layout structures.
⚙️ Actions
Container blocks can be configured to trigger a custom action when clicked.
However, keep in mind: if a nested block inside the container has its own action, that nested block’s action will take priority and override the container’s action when clicked.
This behaviour helps avoid conflicts in more complex layouts, but it’s important to plan your interactions accordingly.