Bento Grid Layout & Sizing Matrix
Complete reference of desktop and mobile dimensions for all 29 Ceynk block types with auto-collision rules.
Ceynk’s Bento Grid layout engine provides complete freedom to design balanced, visual layouts on both desktop and mobile viewports.
Grid System Mechanics
Desktop Grid
- Total Columns: 4 columns (
lg: 4, md: 4) - Unit Height:
80pxper row unit - Margins:
16pxgutters - Flexibility: Cards span 1, 2, 3, or 4 columns
Mobile Grid
- Total Columns: 2 columns (
sm: 2, xs: 2) - Unit Height:
80pxper row unit - Margins:
16pxgutters - Thumb Friendly: Optimized 1 or 2 column flow
Auto-Collision & Compacting
Ceynk features smart vertical collision handling:
- As you reposition or resize cards, items automatically float upward to pack snugly into empty grid spaces.
- No overlapping cards or awkward broken gaps.
Master 29-Block Sizing Reference Table
| Block Type | Desktop Size (W × H) | Mobile Size (W × H) | Sizing Flexibility |
|---|---|---|---|
| Section Title | 4 × 1 |
2 × 1 |
Full-width banner divider |
| Standard Link | 1 × 2 |
2 × 1 |
Expandable to 2×2 |
| Folder Block | 2 × 2 |
2 × 2 |
Fixed 2×2 box |
| Live Availability Badge | 2 × 2 |
2 × 2 |
Fixed 2×2 box |
| Lead Capture / Mailing List | 2 × 4 |
2 × 4 |
2×2 to 2×4 |
| Ceynk Digital Product | 2 × 4 |
2 × 4 |
2×2 or 2×4 |
| Ceynk Video Course | 2 × 4 |
2 × 4 |
2×2 or 2×4 |
| Ceynk Bookings | 2 × 4 |
2 × 4 |
Fixed 2×4 |
| Ceynk Event Tickets | 2 × 4 |
2 × 4 |
Fixed 2×4 |
| Ceynk Merch | 2 × 3 |
2 × 3 |
2×2 to 2×4 |
| YouTube Video | 2 × 3 |
2 × 4 |
2×2 to 2×4 |
| YouTube Playlist | 2 × 4 |
2 × 4 |
Fixed 2×4 carousel |
| Spotify Track | 2 × 2 |
2 × 2 |
Fixed 2×2 |
| Spotify Playlist / Artist | 2 × 1 |
2 × 1 |
1×1 to 2×2 |
| Apple Music Track | 2 × 2 |
2 × 2 |
Fixed 2×2 |
| Music Smart Release Link | 1 × 2 |
2 × 1 |
Small badge |
| Audio Track Upload | 1 × 2 |
2 × 1 |
Small player |
| Image Banner | 1 × 2 |
2 × 2 |
1×1 to 4×4 |
| Stack Pack / Gear Kit | 2 × 2 |
2 × 2 |
2×1, 2×2, 2×4, 4×2 |
| Brand Logo Slider | 4 × 1 |
2 × 1 |
Full-width ribbon |
| Customer Testimonials | 2 × 4 |
2 × 4 |
2×2 or 2×4 |
| TikTok Profile | 2 × 4 |
2 × 4.9 |
Fixed large card |
| Behance Project | 2 × 3 |
2 × 4 |
2×2 to 4×4 |
| GitHub Contribution Chart | 1 × 2 |
2 × 1 |
1×1 to 2×2 |
| Mobile App Download | 1 × 2 |
2 × 1 |
1×2 |
| Pure Text Block | 2 × 2 |
2 × 2 |
1×2 to 2×2 |
| Blog Post / Article | 2 × 4 |
2 × 4 |
2×2 to 2×4 |
| Contact Details & vCard | 2 × 2 |
2 × 2 |
Fixed 2×2 |
| Interactive Map | 2 × 2 |
2 × 2 |
Fixed 2×2 |