--- title: Grid --- [Skip to main content](https://www.basetheme.pro/module-grid#main-content) [![BASE Pro](https://www.basetheme.pro/hubfs/BASE/base-theme-pro.svg "BASE Pro")](https://www.basetheme.pro/?hsLang=en) [![BASE Pro](https://www.basetheme.pro/hubfs/BASE/base-theme-pro-white.svg "BASE Pro")](https://www.basetheme.pro/?hsLang=en) [![BASE Pro](https://www.basetheme.pro/hubfs/BASE/base-theme-pro.svg "BASE Pro")](https://www.basetheme.pro/?hsLang=en) [![BASE Pro](https://www.basetheme.pro/hubfs/BASE/base-theme-pro.svg "BASE Pro")](https://www.basetheme.pro/?hsLang=en) - Mega Menu ## **Build custom mega menus.** Create custom mega menu layouts with multiple columns. Use these features to make each dropdown unique. [BASE Pro](https://ecosystem.hubspot.com/marketplace/website/base-pro-theme-by-smartacre) [Design Create your own style of dropdowns. You have full control to style the dropdowns to match your brand and site design.](https://www.basetheme.pro/?hsLang=en#mega-menu) [Columns Add any number of columns and adjust the size of each column independently.](https://www.basetheme.pro/?hsLang=en#mega-menu) [Spacing The Site Header module includes custom spacing fields for all elements allowing you to refine the layout of the design.](https://www.basetheme.pro/?hsLang=en#mega-menu) [Advanced links Create links with icons and descriptions. Completely customize the style of these links in the modules style settings.](https://www.basetheme.pro/?hsLang=en#mega-menu) [Simple menus Add simple menus to any dropdown. This allows you to quickly create simple single dropdowns.](https://www.basetheme.pro/?hsLang=en#mega-menu) [Rich text editors Add rich text fields to any dropdown. Create content in mega menus utilizing all the functionality that comes with HubSpot's rich text fields.](https://www.basetheme.pro/?hsLang=en#mega-menu) - Templates **Page Templates** Base page templates give you a great starting point to build custom page templates off of. [Blank 1](https://www.basetheme.pro/template-blank-1?hsLang=en) [Blank 2](https://www.basetheme.pro/template-blank-2?hsLang=en) [Blank 3](https://www.basetheme.pro/template-blank-3?hsLang=en) [Home 1](https://www.basetheme.pro/template-home-1?hsLang=en) [Home 2](https://www.basetheme.pro/template-home-2?hsLang=en) [About](https://www.basetheme.pro/template-about?hsLang=en) [Contact](https://www.basetheme.pro/template-contact?hsLang=en) [Pricing](https://www.basetheme.pro/template-pricing-1?hsLang=en) **Landing Page Templates** Base comes included with several of the most common landing page templates. [Landing Page 1](https://www.basetheme.pro/template-landing-page-1?hsLang=en) [Landing Page 2](https://www.basetheme.pro/template-landing-page-2?hsLang=en) [Landing Page 3](https://www.basetheme.pro/template-landing-page-3?hsLang=en) [Landing Page 4](https://www.basetheme.pro/template-landing-page-4?hsLang=en) **Blog Templates** Clean and intuitive blog templates. Blog index template is fully drag and drop and customizable. [Blog Post 1](https://www.basetheme.pro/blog/how-to-maintain-traffic-during-a-blog-migration?hsLang=en) [Blog Listing 1](https://www.basetheme.pro/blog?hsLang=en) [Blog Post 2 (Pro)](https://www.basetheme.pro/blog/how-to-maintain-traffic-during-a-blog-migration?hsLang=en) [Blog Listing 2 (Pro)](https://www.basetheme.pro/case-studies?hsLang=en) - Modules **Free Modules** Modules included with the free theme. **Pro Modules** These modules are only available with **[BASE Pro](https://ecosystem.hubspot.com/marketplace/website/base-pro-theme-by-smartacre)**.  [Accordion](https://www.basetheme.pro/module-accordion?hsLang=en) [Button+](https://www.basetheme.pro/module-button?hsLang=en) [Cards](https://www.basetheme.pro/module-cards?hsLang=en) [Form+](https://www.basetheme.pro/module-form?hsLang=en) [Link](https://www.basetheme.pro/module-link?hsLang=en) [List](https://www.basetheme.pro/module-list?hsLang=en) [Menu+](https://www.basetheme.pro/module-menu?hsLang=en) [Rich Text+](https://www.basetheme.pro/module-rich-text?hsLang=en) [Simple Menu+](https://www.basetheme.pro/module-simple-menu?hsLang=en) [Site Header](https://www.basetheme.pro/module-site-header?hsLang=en) [Text+](https://www.basetheme.pro/module-text?hsLang=en) [Header Settings](https://www.basetheme.pro/module-header-settings?hsLang=en) [Page Settings](https://www.basetheme.pro/module-page-settings?hsLang=en) [Post Settings](https://www.basetheme.pro/module-post-settings?hsLang=en) [Background](https://www.basetheme.pro/module-background?hsLang=en) [Blog Header](https://www.basetheme.pro/case-studies?hsLang=en) [Blog Listing](https://www.basetheme.pro/case-studies?hsLang=en) [Buttons](https://www.basetheme.pro/module-buttons?hsLang=en) [Grid](https://www.basetheme.pro/module-grid) [Icons](https://www.basetheme.pro/module-icons?hsLang=en) [Logo Scroller](https://www.basetheme.pro/module-logo-scroller?hsLang=en) [Overflow Cards](https://www.basetheme.pro/module-overflow-cards?hsLang=en) [Overflow Posts](https://www.basetheme.pro/module-overflow-posts?hsLang=en) [Pricing](https://www.basetheme.pro/module-pricing?hsLang=en) [Recent Posts](https://www.basetheme.pro/module-recent-posts?hsLang=en) [Table](https://www.basetheme.pro/module-table?hsLang=en) - Support [Documentation Instructions for how to get started using the Base theme.](https://www.basetheme.pro/documentation?hsLang=en) [Support Plans If you need help with the Base theme we offer several service and support options.](https://www.basetheme.pro/support-plans?hsLang=en) [Contact SmartAcre The Base theme is created by SmartAcre. Contact us to learn more.](https://www.basetheme.pro/contact?hsLang=en) - [Pricing](https://www.basetheme.pro/pricing?hsLang=en) [BASE](https://ecosystem.hubspot.com/marketplace/website/base-theme-by-smartacre) [BASE Pro](https://ecosystem.hubspot.com/marketplace/website/base-pro-theme-by-smartacre) [![BASE Pro](https://www.basetheme.pro/hubfs/BASE/base-theme-pro.svg "BASE Pro")](https://www.basetheme.pro/?hsLang=en) [![BASE Pro](https://www.basetheme.pro/hubfs/BASE/base-theme-pro-white.svg "BASE Pro")](https://www.basetheme.pro/?hsLang=en) [![BASE Pro](https://www.basetheme.pro/hubfs/BASE/base-theme-pro.svg "BASE Pro")](https://www.basetheme.pro/?hsLang=en) [![BASE Pro](https://www.basetheme.pro/hubfs/BASE/base-theme-pro.svg "BASE Pro")](https://www.basetheme.pro/?hsLang=en) ### Offcanvas **Easily create offcanvas menus like this this one in the mobile or desktop header.** **Includes:** - **Menu:** Add collapse submenus that give you full control to recreate mega menu content for mobile views. - **Simple menu:** Recreate any utility menu links on mobile. - **Buttons**: Primary and secondary button styles which are fully customizable in the module's style. - **Icons:** Perfect for creating social and sharing buttons. - **Rich text:** Insert anything you can add with a rich text area. [BASE](https://ecosystem.hubspot.com/marketplace/website/base-theme-by-smartacre) [BASE Pro](https://ecosystem.hubspot.com/marketplace/website/base-pro-theme-by-smartacre) - Mega Menu **Build custom mega menus.** Create custom mega menu layouts with multiple columns. Each dropdown can be unique and include any of these modules. [BASE Pro](https://ecosystem.hubspot.com/marketplace/website/base-pro-theme-by-smartacre) [Design Create your own style of dropdowns. You have full control to style the dropdowns to match your brand and site design.](https://www.basetheme.pro/?hsLang=en#mega-menu) [Columns Add any number of columns and adjust the size of each column independently.](https://www.basetheme.pro/?hsLang=en#mega-menu) [Spacing The Site Header module includes custom spacing fields for all elements allowing you to refine the layout of the design.](https://www.basetheme.pro/?hsLang=en#mega-menu) [Advanced links Create links with icons and descriptions. Completely customize the style of these links in the modules style settings.](https://www.basetheme.pro/?hsLang=en#mega-menu) [Simple menus Add simple menus to any dropdown. This allows you to quickly create simple single dropdowns.](https://www.basetheme.pro/?hsLang=en#mega-menu) [Rich text Add rich text fields to any dropdown. Create content in mega menus utilizing all the functionality that comes with HubSpot's rich text fields.](https://www.basetheme.pro/?hsLang=en#mega-menu) - Templates **Page Templates** Base page templates give you a great starting point to build custom page templates off of. [Blank 1](https://www.basetheme.pro/template-blank-1?hsLang=en) [Blank 2](https://www.basetheme.pro/template-blank-2?hsLang=en) [Blank 3](https://www.basetheme.pro/template-blank-3?hsLang=en) [Home 1](https://www.basetheme.pro/template-home-1?hsLang=en) [Home 2](https://www.basetheme.pro/template-home-2?hsLang=en) [About](https://www.basetheme.pro/template-about?hsLang=en) [Contact](https://www.basetheme.pro/template-contact?hsLang=en) [Pricing](https://www.basetheme.pro/template-pricing-1?hsLang=en) **Landing Page Templates** Base comes included with several of the most common landing page templates. [Landing Page 1](https://www.basetheme.pro/template-landing-page-1?hsLang=en) [Landing Page 2](https://www.basetheme.pro/template-landing-page-2?hsLang=en) [Landing Page 3](https://www.basetheme.pro/template-landing-page-3?hsLang=en) [Landing Page 4](https://www.basetheme.pro/template-landing-page-4?hsLang=en) **Blog Templates** Clean and intuitive blog templates. Blog index template is fully drag and drop and customizable. [Blog Post 1](https://www.basetheme.pro/blog/how-to-maintain-traffic-during-a-blog-migration?hsLang=en) [Blog Listing 1](https://www.basetheme.pro/blog?hsLang=en) [Blog Post 2 (Pro)](https://www.basetheme.pro/blog/how-to-maintain-traffic-during-a-blog-migration?hsLang=en) [Blog Listing 2 (Pro)](https://www.basetheme.pro/case-studies?hsLang=en) - Modules **Free Modules** Modules included with the free theme. [Accordion](https://www.basetheme.pro/module-accordion?hsLang=en) [Button+](https://www.basetheme.pro/module-button?hsLang=en) [Cards](https://www.basetheme.pro/module-cards?hsLang=en) [Form+](https://www.basetheme.pro/module-form?hsLang=en) [Link](https://www.basetheme.pro/module-link?hsLang=en) [List](https://www.basetheme.pro/module-list?hsLang=en) [Menu+](https://www.basetheme.pro/module-menu?hsLang=en) [Rich Text+](https://www.basetheme.pro/module-rich-text?hsLang=en) [Simple Menu+](https://www.basetheme.pro/module-simple-menu?hsLang=en) [Site Header](https://www.basetheme.pro/module-site-header?hsLang=en) [Text+](https://www.basetheme.pro/module-text?hsLang=en) [Header Settings](https://www.basetheme.pro/module-header-settings?hsLang=en) [Page Settings](https://www.basetheme.pro/module-page-settings?hsLang=en) [Post Settings](https://www.basetheme.pro/module-post-settings?hsLang=en) **Pro Modules** These modules are only available with **[BASE Pro](https://ecosystem.hubspot.com/marketplace/website/base-pro-theme-by-smartacre)**. [Background](https://www.basetheme.pro/module-background?hsLang=en) [Blog Header](https://www.basetheme.pro/case-studies?hsLang=en) [Blog Listing](https://www.basetheme.pro/case-studies?hsLang=en) [Buttons](https://www.basetheme.pro/module-buttons?hsLang=en) [Grid](https://www.basetheme.pro/module-grid) [Icons](https://www.basetheme.pro/module-icons?hsLang=en) [Logo Scroller](https://www.basetheme.pro/module-logo-scroller?hsLang=en) [Overflow Cards](https://www.basetheme.pro/module-overflow-cards?hsLang=en) [Overflow Posts](https://www.basetheme.pro/module-overflow-posts?hsLang=en) [Pricing](https://www.basetheme.pro/module-pricing?hsLang=en) [Recent Posts](https://www.basetheme.pro/module-recent-posts?hsLang=en) [Table](https://www.basetheme.pro/module-table?hsLang=en) - Support [Documentation Instructions for how to get started using the Base theme.](https://www.basetheme.pro/documentation?hsLang=en) [Support plans If you need help with the Base theme we offer several service and support options.](https://www.basetheme.pro/support-plans?hsLang=en) [Contact SmartAcre The Base theme is created by SmartAcre. Contact us to learn more.](https://www.basetheme.pro/contact?hsLang=en) - [Pricing](https://www.basetheme.pro/pricing?hsLang=en) **Interested in trying the Base theme?** The **BASE** theme is free and a great way to trial **BASE Pro**. Buying the pro version now gives you access to future updates and additional pro modules forever. [BASE](https://ecosystem.hubspot.com/marketplace/website/base-theme-by-smartacre) [BASE Pro](https://ecosystem.hubspot.com/marketplace/website/base-pro-theme-by-smartacre) Suggested links Quick links - [Build a custom site header](https://www.basetheme.pro/module-site-header) - [Create unique cards](https://www.basetheme.pro/module-cards) - [Get support](https://www.basetheme.pro/support-plans) - [Contact SmartAcre](https://www.basetheme.pro/contact) Suggested links Quick links - [Build a custom site header](https://www.basetheme.pro/module-site-header) - [Create unique cards](https://www.basetheme.pro/module-cards) - [Get support](https://www.basetheme.pro/support-plans) - [Contact SmartAcre](https://www.basetheme.pro/contact) ![Grid](https://www.basetheme.pro/hubfs/BASE/base-grid-module.svg) # Grid PRO MODULE The Grid module is designed for aligning content in a grid format. With each item in the grid you have control to adjust the width and height at desktop, laptop, tablet and mobile breakpoints. ## Default style This is an example using the default grid style and just applying a light background to each item. The first item has a width of eight columns while the rest of the items have a width of four. ### Grid item Add content to each grid item using the Rich Text editor. Adjust the style of the grid items in the styles tab of the module. ### Grid item Add content to each grid item using the Rich Text editor. Adjust the style of the grid items in the styles tab of the module. ### Grid item Add content to each grid item using the Rich Text editor. Adjust the style of the grid items in the styles tab of the module. ### Grid item Add content to each grid item using the Rich Text editor. Adjust the style of the grid items in the styles tab of the module. ### Grid item Add content to each grid item using the Rich Text editor. Adjust the style of the grid items in the styles tab of the module. ### Grid item Add content to each grid item using the Rich Text editor. Adjust the style of the grid items in the styles tab of the module. ### Grid item Add content to each grid item using the Rich Text editor. Adjust the style of the grid items in the styles tab of the module. ### Grid item Add content to each grid item using the Rich Text editor. Adjust the style of the grid items in the styles tab of the module. ## Custom grid layouts Each item in the grid layout has its own with the height fields. In this example the first item has a width of 8 columns and a height of 2 rows. The first item is also an example of applying a background image and using the rich text editor to adjust the style of the text so that it is legible over the image. ![computer](https://www.basetheme.pro/hs-fs/hubfs/computer.jpg?width=1279&height=854&name=computer.jpg) ### **Grid item with background image** With in each grid item you can add a background image. In the styles tab of the module you can add an overlay color that gets applied to all background images. Use the rich text editor to adjust the style of the text. ### Grid item Add content to each grid item using the Rich Text editor. Adjust the style of the grid items in the styles tab of the module. ### Grid item Add content to each grid item using the Rich Text editor. Adjust the style of the grid items in the styles tab of the module. ### Grid item Add content to each grid item using the Rich Text editor. Adjust the style of the grid items in the styles tab of the module. ### Grid item Add content to each grid item using the Rich Text editor. Adjust the style of the grid items in the styles tab of the module. ### Grid item Add content to each grid item using the Rich Text editor. Adjust the style of the grid items in the styles tab of the module. [![BASE Pro](https://www.basetheme.pro/hubfs/BASE/base-theme-pro.svg "BASE Pro")](https://www.basetheme.pro/?hsLang=en) Created by SmartAcre, a HubSpot Solutions partner for over a decade. **TEMPLATES** - [Blank 1](https://www.basetheme.pro/template-blank-1) - [Blank 2](https://www.basetheme.pro/template-blank-2) - [Blank 3](https://www.basetheme.pro/template-blank-3) - [Home 1](https://www.basetheme.pro/template-home-1) - [Home 2](https://www.basetheme.pro/template-home-2) - [About](https://www.basetheme.pro/template-about) - [Contact](https://www.basetheme.pro/template-contact) - [Pricing](https://www.basetheme.pro/template-pricing-1) - [Landing Page 1](https://www.basetheme.pro/template-landing-page-1) - [Landing Page 2](https://www.basetheme.pro/template-landing-page-2) - [Landing Page 3](https://www.basetheme.pro/template-landing-page-3) - [Landing Page 4](https://www.basetheme.pro/template-landing-page-4) - [Blog Post 1](https://www.basetheme.pro/blog/how-to-maintain-traffic-during-a-blog-migration) - [Blog Listing 1](https://www.basetheme.pro/blog) - [Blog Post 2 (Pro)](https://www.basetheme.pro/blog/how-to-maintain-traffic-during-a-blog-migration) - [Blog Listing 2 (Pro)](https://www.basetheme.pro/case-studies) **FREE MODULES** - [Accordion](https://www.basetheme.pro/module-accordion) - [Button+](https://www.basetheme.pro/module-button) - [Cards](https://www.basetheme.pro/module-cards) - [Form+](https://www.basetheme.pro/module-form) - [Link](https://www.basetheme.pro/module-link) - [List](https://www.basetheme.pro/module-list) - [Menu+](https://www.basetheme.pro/module-menu) - [Rich Text+](https://www.basetheme.pro/module-rich-text) - [Simple Menu+](https://www.basetheme.pro/module-simple-menu) - [Site Header](https://www.basetheme.pro/module-site-header) - [Text+](https://www.basetheme.pro/module-text) - [Header Settings](https://www.basetheme.pro/module-header-settings) - [Page Settings](https://www.basetheme.pro/module-page-settings) - [Post Settings](https://www.basetheme.pro/module-post-settings) **PRO MODULES** - [Background](https://www.basetheme.pro/module-background) - [Blog Header](https://www.basetheme.pro/case-studies) - [Blog Listing](https://www.basetheme.pro/case-studies) - [Buttons](https://www.basetheme.pro/module-buttons) - [Grid](https://www.basetheme.pro/module-grid) - [Icons](https://www.basetheme.pro/module-icons) - [Logo Scroller](https://www.basetheme.pro/module-logo-scroller) - [Overflow Cards](https://www.basetheme.pro/module-overflow-cards) - [Overflow Posts](https://www.basetheme.pro/module-overflow-posts) - [Pricing](https://www.basetheme.pro/module-pricing) - [Recent Posts](https://www.basetheme.pro/module-recent-posts) - [Table](https://www.basetheme.pro/module-table) **SUPPORT** - [Documentation](https://www.basetheme.pro/documentation) - [Support Plans](https://www.basetheme.pro/support-plans) - [Contact SmartAcre](https://www.basetheme.pro/contact) - [Pricing](https://www.basetheme.pro/pricing) - [Privacy Policy](https://www.basetheme.pro/privacy-policy) - [Accessibility Statement](https://www.basetheme.pro/accessibility-statement) - Manage Cookies - Do Not Sell or Share My Personal Information © 2026 SmartAcre®, Inc.