Grid
Fields to set settings for a grid layout.
- Width Type [Choice[
Fit to Content and Max Width will fit as many items into a row as will fit. Even will give the option to set the max number of columns to a row.
Choices: Even, Fit to Content, Max Width - Items Per Row: _[Number]
_Number of items to display in a row. - Spacing Between Rows: _[Number]
_ - Spacing Between Items: [Number]
- Align Content _[Choice]
_How the items should align vertically with each other.
Choices: Stretch, Center, Top, Bottom - Justify Content _[Choice]
_How the items should align horizontally in the row. Some options will only be noticeable on non-even columns and/or in rows that do not contain the max number of columns.
Choices: Default, Left, Center, Right, Space Between, Space Around, Space Evenly
How to Use Grid Settings in the Rubric Theme
The Grid module group provides essential layout controls that help you create organized, responsive content displays throughout your HubSpot pages. These settings are particularly valuable when showcasing educational programs, faculty profiles, event listings, or resource libraries where consistent visual organization enhances user experience.
When working with grid-enabled modules in the page editor, you’ll find these settings in the module’s Design tab. The Width Type setting serves as your primary layout controller—choose Even when you want predictable, uniform columns (ideal for team member cards or course catalogs), or select Fit to Content when your items vary in size and you want the theme to automatically optimize spacing.
For education institutions using the Rubric theme, the spacing controls become crucial when displaying content like course thumbnails or resource downloads. Set Spacing Between Items to 20-30 pixels for breathing room between cards, while Spacing Between Rows typically works well at 40-50 pixels to create clear visual separation between content rows.
The alignment options significantly impact your page’s professional appearance. Use Align Content: Stretch when you want consistent card heights across a row, which works exceptionally well for program descriptions or staff profiles. Justify Content: Space Between creates polished layouts for featured content sections, automatically distributing items evenly across the available width.
Pro tip: When building landing pages for educational programs or events, start with Width Type: Even and Items Per Row: 3 for desktop-friendly layouts that automatically adapt to mobile devices. This configuration ensures your content remains scannable and accessible across all device types while maintaining the structured aesthetic that makes the Rubric theme ideal for institutional websites.