Variable Size Layout
The Variable Size layout combines masonry-style flow with the ability for blocks to span different column widths, creating dynamic and interesting layouts.
Overview
A masonry layout where individual items can be assigned different widths for visual hierarchy.
| Attribute | Value |
|---|---|
| Category | Grid |
| Columns | Configurable base |
| Spanning | 1x, 2x, 3x column width |
| Flow | Masonry (fills gaps) |
Best for:
- Dynamic portfolios
- Highlighting key images
- Mixed importance content
- Visual storytelling
Column Settings
Base Columns
Set the foundation column count:
- 6 columns - Moderate variation
- 10 columns - Default, flexible
- 12 columns - Maximum precision
Gap Size
Space between items:
- Small - 10px
- Medium - 20px (default)
- Large - 30px
- Custom - Specify exact pixels
Block Sizes
Size Options
Each block can be assigned a size:
- Small (1x) - Single column span
- Medium (2x) - Double column span
- Large (3x) - Triple column span
- Extra Large (4x) - Quad column span
Setting Block Size
- Select a block
- Open block settings
- Choose size from dropdown
- Block repositions automatically
Automatic Sizing
- Smart - System chooses based on image orientation
- Random - Varied sizes for visual interest
- Uniform - All same size (becomes regular grid)
Masonry Flow
How It Works
Items flow into available space:
- Items are placed left-to-right
- New items fill the shortest column
- Large items span multiple columns
- Gaps are minimized automatically
Ordering
- Default - Order as added
- By Date - Chronological
- By Size - Largest first
- Manual - Drag to reorder
Responsive Behavior
Breakpoint Adaptation
- Columns reduce on smaller screens
- Large items may become medium
- Maintains relative proportions
Mobile Layout
- Typically reduces to 2-3 columns
- Extra large items cap at full width
- Touch-optimized spacing
Tips
- Use larger sizes sparingly for emphasis
- Mix sizes for visual rhythm
- Place important content in larger blocks
- Test how items reflow at different sizes