Fixed Width Layout
The Fixed Width layout creates a Pinterest-style arrangement with tiles of varying sizes, perfect for visual discovery and mixed content.
Overview
A dynamic, masonry-style layout where tiles flow naturally into available spaces.
| Attribute | Value |
|---|---|
| Category | Grid |
| Tile Sizes | Variable |
| Columns | Configurable |
| Pattern | Random or structured |
Best for:
- Mixed content types
- Visual discovery
- Pinterest/Tumblr style
- Creative portfolios
Column Settings
Column Count
Set the number of columns:
- 2 columns - Large tiles, minimal content
- 3 columns - Balanced default
- 4 columns - More items visible
- 5+ columns - Dense grid
- Auto - Responsive based on container width
Column Width
- Fixed - Consistent column width
- Flexible - Columns adjust to fill space
Gap & Spacing
Gutter Width
Space between tiles:
- Minimal - 4px
- Small - 10px
- Medium - 20px (default)
- Large - 30px
- Custom - Specify exact pixels
Vertical Gaps
Gaps between rows of tiles (can differ from horizontal).
Tile Patterns
Pattern Types
- Random - Tiles sized randomly
- Alternating - Regular size variation
- Featured - First/selected items larger
- Uniform - All tiles same size
Tile Sizes
Individual tiles can be:
- 1x - Standard single column
- 2x - Spans two columns
- Featured - Larger highlight tile
Layout Settings
Aspect Ratios
- Original - Keep image proportions
- Square - Force 1:1 tiles
- Portrait - Taller tiles (2:3)
- Landscape - Wider tiles (3:2)
Responsive Behavior
- Columns reduce on smaller screens
- Maintains relative proportions
- Touch-optimized spacing
Load Behavior
- All at once - Load entire gallery
- Lazy load - Load as user scrolls
- Paginated - Load in batches
Tips
- Mix horizontal and vertical images for visual interest
- Use featured tiles for important content
- Smaller gaps create a denser, more modern feel
- Test different column counts for your content