--- title: Smart Bento Grid Documention description: Smart Bento Grid Documention --- [Skip to content](https://www.modfrybus.shop/smart-bento-grid-documention#main-content) [![Modfrybus-logo](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Modfrybus-logo.png?width=90&height=52&name=Modfrybus-logo.png)](https://www.modfrybus.shop/?hsLang=en) - [Home](https://www.modfrybus.shop/) - [About](https://www.modfrybus.shop/about-us) - [Services](https://www.modfrybus.shop/services) - [Pricing](https://www.modfrybus.shop/pricing) - [Blog](https://www.modfrybus.shop/modfrybus-blog) - [Contact](https://www.modfrybus.shop/contact-us) Open main navigation Close main navigation - [Home](https://www.modfrybus.shop/) - [About](https://www.modfrybus.shop/about-us) - [Services](https://www.modfrybus.shop/services) - [Pricing](https://www.modfrybus.shop/pricing) - [Blog](https://www.modfrybus.shop/modfrybus-blog) - [Contact](https://www.modfrybus.shop/contact-us) - [Marketplace Assests](https://app.hubspot.com/ecosystem/48318526/marketplace/modules?eco_providers=Modfrybus) [Marketplace Assests](https://app.hubspot.com/ecosystem/48318526/marketplace/modules?eco_providers=Modfrybus) #### Smart Bento Grid Documention ## 1. Introduction (Overview) **Bento Grid Module:** Create responsive, customizable grid layouts with multiple cards for images, text, and links. Perfect for portfolios, products, or services, fully mobile-friendly and modern. ## 2. Key Features - **Multiple Grid Cards** – Add and display as many cards as needed. - **Flexible Layout Options** – Easily arrange cards in multiple styles and adapt the grid to fit your content perfectly. - **Responsive Design** – Grid automatically adapts for desktop, tablet, and mobile. - **Equal Height Cards** – All cards maintain equal height for a clean, organized look. - **Customizable Content** – Add headings, descriptions, images, and links. - **Spacing & Alignment Control** – Adjust spacing inside cards and content alignment. - **Full Styling Control** – Customize fonts, colors, backgrounds, and borders to match your design. ## 3. Installation – Downloading the Module from HubSpot Marketplace - Log in to your HubSpot account. - Go to the **Marketplace** from the main navigation menu. - Search for your module by name. - Find the module in the results and click **Install**. - If it’s a paid module, you can also click **Buy Now** to purchase and install directly. ## 4. How to Use – Adding the Module to Your Page - Open your HubSpot page editor. - Click on **Add Module**. - Search for your module by name. - Drag and drop the module into the desired section of your page. - **Bento Grid Module:** Design fully responsive, visually appealing grid layouts with multiple cards. Each card can include images, headings, descriptions, and links. Perfect for portfolios, product showcases, services, or any content needing a clean, organized, modern, and mobile-friendly presentation. ## 5. Module Settings Guide **1. Content Tab**  - **Add & Edit Multiple Grid Cards** – Easily add or modify multiple cards. - **Customizable Content** – Set title, description, badge, URL, and button text. - **Grid Layout Options** – Choose from different layout types per your design needs. - **Style Customization** – Adjust headline color, button text color, badge color, and alignment. ![Group 1000002265](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Group%201000002265.png?width=1000&height=785&name=Group%201000002265.png) **2. Style Tab** - **Module Settings:** Set module width (full or custom), spacing, and overall color options. - **Module Spacing:** Control spacing separately for desktop. - **Layout Options** – Choose and adjust grid layout style. - **Background Customization** – Set full module background color. - **Content Customization** – Adjust text color, font size, font family, button font color & background, stat number color, spacing. - **Card Customization** – Configure border color, hover border color, box shadow on hover, border radius. - **Avatar Customizatio**n – Set avatar size, border color, and stat background color. - **Image Settings** – Adjust image height and border radius. - **Video Settings** – Set minimum video height. - **Fully Customizable**: Customize every element to match your design and layout needs. - **Fully Responsive**: Works seamlessly across desktop, tablet, and mobile devices. ![Group 1000002258](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Group%201000002258.png?width=1000&height=753&name=Group%201000002258.png)   ## 6. Examples / Demo Preview View the module in action:[https://www.modfrybus.shop/smart-bento-grid](https://www.modfrybus.shop/smart-bento-grid?hsLang=en) ## 7. Support & Contact For questions or support, contact us at [productqueriemodfrybus@outlook.com](mailto:productqueriemodfrybus@outlook.com) We’re happy to help! [![Modfrybus-logo](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Modfrybus-logo.png?width=150&height=87&name=Modfrybus-logo.png "Modfrybus-logo")](https://www.modfrybus.shop/?hsLang=en) [Privacy Policy](https://www.modfrybus.shop/privacy-policy?hsLang=en) [Terms and Conditions](https://www.modfrybus.shop/terms-and-conditions?hsLang=en) [Refund Policy & Support](https://www.modfrybus.shop/modfrybus-refund-policy-support?hsLang=en) Copyright © 2025, Modfrybus