Column Grid Layout
The Column Grid layout provides a structured grid system with snap-to-grid positioning and resizable elements, ideal for structured page layouts and design-forward presentations.
Overview
A 12-column grid system where blocks snap to grid positions and can be resized across columns.
| Attribute | Value |
|---|---|
| Category | Grid |
| Columns | 12 (default) |
| Gutter | 16px |
| Row Height | 20px |
Best for:
- Structured page layouts
- Magazine-style designs
- Mixed content grids
- Design-forward portfolios
Grid Settings
Columns
The grid uses a 12-column system by default, allowing flexible placement of content blocks across the grid.
Gutter
Space between columns:
- Default: 16px
- Configurable to match your design needs
Row Height
The base unit for vertical sizing:
- Default: 20px
- Blocks snap to multiples of this height
Features
Snap to Grid
Blocks automatically align to the nearest grid position when moved, keeping your layout clean and aligned.
Resizable Blocks
Drag block edges to resize across columns. Blocks snap to column boundaries for consistent sizing.
Float Mode
When enabled, blocks can overlap and layer on top of each other — useful for creative compositions.
Animation
Smooth transitions when blocks are repositioned or resized (enabled by default).
Tips
- Use the 12-column grid to create asymmetric but balanced layouts
- Float mode is great for overlapping images and text
- Keep gutter consistent across sections for visual harmony
- Test on different screen sizes to ensure the grid responds well