Perfect Grid is a lightweight visual plugin for Bubble.io that lets you build fully responsive and adaptive grid layouts — no custom CSS required. Inspired by modern streaming platforms and card-based UI systems, it automatically distributes child elements in a clean, fluid, and visually balanced layout using native CSS Grid logic. Whether you're working with Repeating Groups or regular groups, Perfect Grid ensures your layout looks consistent and polished across all screen sizes — from mobile phones to large monitors.
You have full control over item sizing, including minimum/maximum widths and viewport-based scaling, and you can enforce specific aspect ratios to keep the design sharp and consistent. It’s simple to use, yet powerful enough to elevate the visual structure of your app.


Usage Features

Easy drag-and-drop setup
Add the Perfect Grid element to your page and define the container ID. No extra setup required.

Smart responsive layout
The grid automatically adjusts to available space, calculating the number of columns based on screen size.

Flexible size control
Set values for Min Width, Max Width, and Viewport Percent to fine-tune how items respond to different devices.

Aspect Ratio support
Keep consistent proportions by setting a fixed width-to-height ratio (e.g., 900x1600).

Repeating Group and Group compatible
Works seamlessly with both Repeating Groups and regular groups. Just ensure child elements have fixed size (100% width and height) or use min-width/min-height set to 0px.

No external libraries
Built entirely with native CSS — lightweight and optimized for fast rendering.

Pixel-perfect responsiveness
Maintains a clean and structured layout across all devices with smooth scaling.

Ideal for card-based UIs
Perfect for video libraries, course catalogs, product displays, or any multi-item layout.

Minimal footprint
Injects only the necessary CSS rules, keeping your app lean and efficient.

Helpful console feedback
Provides console logs to assist with debugging in case of missing or incorrect setup.