Overview
The Grid Span Extension gives you precise control over how blocks span across grid columns and rows when placed inside Grid Container blocks. Essential for creating sophisticated, magazine-style layouts with items spanning multiple columns or rows.
Key Features
- Column Span: Make items span 2, 3, or more columns
- Row Span: Make items span multiple rows
- Responsive Spans: Different spans per breakpoint
- Grid Positioning: Control exact grid placement
- Visual Preview: See grid layout in editor
- Auto-fit Support: Works with auto-flow grids
How to Use
- Add a Grid Container block
- Add child blocks inside the grid
- Select a child block
- Find Grid Span settings in sidebar
- Set column span (1-12)
- Optionally set row span (1-6)
- Configure responsive spans if needed
- Preview layout
Settings
Column Span
- Span Columns: Number of columns to span (1-12)
- Auto: Let grid auto-place the item
- Full Width: Span all available columns
Row Span
- Span Rows: Number of rows to span (1-6)
- Auto Height: Natural content height
Responsive Spans
- Desktop Span: Columns/rows on large screens
- Tablet Span: Columns/rows on medium screens
- Mobile Span: Columns/rows on small screens (typically 1)
Common Patterns
Featured Item Layout
- First item: Span 2 columns, 2 rows
- Other items: Standard 1×1
- Creates magazine-style featured post
Masonry Layout
- Vary row spans based on content
- Keep column spans consistent
- Creates Pinterest-style layout
Asymmetric Grid
- Mix 1-column and 2-column items
- Create visual interest and hierarchy
- Perfect for portfolios
Best Practices
- Plan grid structure before building
- Use spans purposefully to create hierarchy
- Ensure spans do not exceed grid columns
- Test responsive behavior on all breakpoints
- Use consistent spans for similar content types
- Consider mobile – reduce spans for small screens
Common Use Cases
- Blog Grids: Featured post spans 2 columns
- Portfolio: Some projects span 2×2, others 1×1
- Product Grids: Highlight items with larger spans
- Image Galleries: Varying image sizes
- Dashboard Widgets: Different widget sizes
Grid Math
- 12-column grid with 3-column spans = 4 items per row
- 12-column grid with 2-column spans = 6 items per row
- Mix spans carefully to avoid gaps
Troubleshooting
- Items overlapping: Reduce span values
- Gaps in grid: Check that spans divide evenly into columns
- Layout breaks on mobile: Set mobile spans to 1
- Item too wide: Reduce column span