---
title: Bento Grid Layout & Sizing Matrix
description: Complete reference of desktop and mobile dimensions for all 29 Ceynk block types with auto-collision rules.
sidebar:
  hidden: true
---

Ceynk's Bento Grid layout engine provides complete freedom to design balanced, visual layouts on both desktop and mobile viewports.

---

## Grid System Mechanics

<Columns cols={2}>
  <Column>
    ### Desktop Grid
    - **Total Columns**: 4 columns (`lg: 4, md: 4`)
    - **Unit Height**: `80px` per row unit
    - **Margins**: `16px` gutters
    - **Flexibility**: Cards span 1, 2, 3, or 4 columns
  </Column>
  <Column>
    ### Mobile Grid
    - **Total Columns**: 2 columns (`sm: 2, xs: 2`)
    - **Unit Height**: `80px` per row unit
    - **Margins**: `16px` gutters
    - **Thumb Friendly**: Optimized 1 or 2 column flow
  </Column>
</Columns>

---

## 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 |