> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/other/multicontent-section-bento-grid.md). # Multicontent Section - Bento Grid The Multicontent Bento Grid section creates a flexible, magazine-style layout where content blocks can span multiple columns and rows. Unlike regular grids where all items are the same size, the Bento Grid lets you create dynamic layouts with some items taking up more space than others. You can mix images, videos, text, products, collections, and blog articles, and even add empty spaces to create visual breathing room. This makes it perfect for creating editorial-style pages, featured product showcases, or eye-catching gallery layouts.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Open **Sections** > **Multicontent Section - Bento Grid**. 3. Make your changes, preview live, then click **Save**. {% endhint %} ### Settings #### Heading * **Heading**: The main title that appears above your grid. Leave blank to hide the heading. * **Heading size**: Controls how large the heading text appears, from extra small to extra extra large. * **Underline**: Adds a decorative underline beneath the heading when enabled. * **Text position**: Aligns the heading text to the left, center, or right. #### Layout * **Grid columns**: Sets how many columns your grid has on desktop (2 to 6 columns). This determines the grid structure that items can span across. * **Grid rows**: Sets how many rows your grid has. The minimum row height is set automatically based on content, but rows can grow taller to fit content. * **Grid gap**: Controls the spacing between grid items on desktop in pixels. * **Full width**: When enabled, the section stretches across the entire browser width instead of staying within the page margins. * **Color scheme**: Choose a color palette that matches your brand and affects text and background colors. #### Mobile layout * **Grid columns (mobile)**: Sets how many columns your grid has on mobile devices (2 to 4 columns). * **Minimum row height (mobile)**: Sets the minimum height for each row on mobile when aspect ratio is not set. * **Mobile grid gap**: Controls the spacing between grid items on mobile devices in pixels. #### Cards settings * **Aspect ratio**: Sets a consistent aspect ratio for all items. When set, this overrides minimum row height. Choose None to use minimum height instead, or select Square, Landscape, Portrait, or Tall. * **Minimum row height**: Sets the minimum height for each row in pixels. Rows can grow taller to fit content. This setting only appears when aspect ratio is set to "None". * **Border width**: Adds a border around each card. Set to 0 to remove borders. * **Border radius**: Rounds the corners of each card. Set to 0 for sharp corners. * **Use global content settings**: When enabled, all blocks use the same content position and alignment settings. When disabled, each block can have its own settings. * **Group the header and button**: When enabled, keeps the heading and button together as one group. When disabled, you can position them separately. * **Content position**: Controls where content appears vertically within each card (top, center, or bottom). * **Content alignment**: Aligns text and content horizontally (left, center, or right). * **Heading position**: Sets the position of headings when content grouping is disabled. * **Button position**: Sets the position of buttons when content grouping is disabled. * **Card heading size**: Controls the size of headings within each card on desktop. * **Card heading size (mobile)**: Controls the size of headings within each card on mobile devices. * **Enable media hover animation**: Adds a subtle animation effect when visitors hover over cards with images or videos. #### Blocks: #### Image Block * **Column span (desktop)**: Number of columns this item spans horizontally on desktop (1 to 6). * **Row span (desktop)**: Number of rows this item spans vertically on desktop (1 to 4). * **Column span (mobile)**: Number of columns this item spans horizontally on mobile (1 to 4). * **Row span (mobile)**: Number of rows this item spans vertically on mobile (1 to 4). * **Image**: Upload the image you want to display. * **Heading**: Text that appears over the image. * **Link**: The URL where visitors go when they click the image or button. * **Button label**: Text for the button. Leave blank to make the entire image clickable. * **Overlay color**: The color of the semi-transparent layer that appears over the image to improve text readability. * **Overlay opacity**: Controls how dark or light the overlay appears (0% is transparent, 100% is fully opaque). #### Video Block * **Column span (desktop)**: Number of columns this item spans horizontally on desktop (1 to 6). * **Row span (desktop)**: Number of rows this item spans vertically on desktop (1 to 4). * **Column span (mobile)**: Number of columns this item spans horizontally on mobile (1 to 4). * **Row span (mobile)**: Number of rows this item spans vertically on mobile (1 to 4). * **Video source**: Choose between uploading your own video file or using a YouTube/Vimeo URL. * **Video file**: Upload a video file from your computer. * **Video URL**: Paste a YouTube or Vimeo video link. * **Cover image**: A still image that displays before the video plays. * **Mute video**: Automatically mutes video audio when enabled. * **Overlay color**: The color of the semi-transparent layer over the video. * **Overlay opacity**: Controls how dark or light the overlay appears. #### Text Block * **Column span (desktop)**: Number of columns this item spans horizontally on desktop (1 to 6). * **Row span (desktop)**: Number of rows this item spans vertically on desktop (1 to 4). * **Column span (mobile)**: Number of columns this item spans horizontally on mobile (1 to 4). * **Row span (mobile)**: Number of rows this item spans vertically on mobile (1 to 4). * **Enable custom heading size**: When enabled, allows you to set a custom heading size for this text block instead of using the section default. * **Heading**: The main heading for your text block. * **Content**: The main text content. You can format it with bold, italic, links, and more. * **Font size**: Controls the size of the content text on desktop. * **Font size (mobile)**: Controls the size of the content text on mobile devices. * **Button label**: Text that appears on the button. * **Button link**: The URL where the button leads. * **Button style**: Choose how the button looks on desktop (solid, outline, transparent, or link style). * **Button style (mobile)**: Choose how the button looks on mobile devices. * **Overlay color**: The color of the semi-transparent layer behind the text. * **Overlay opacity**: Controls how dark or light the overlay appears. #### Product Block * **Column span (desktop)**: Number of columns this item spans horizontally on desktop (1 to 6). * **Row span (desktop)**: Number of rows this item spans vertically on desktop (1 to 4). * **Column span (mobile)**: Number of columns this item spans horizontally on mobile (1 to 4). * **Row span (mobile)**: Number of rows this item spans vertically on mobile (1 to 4). * **Product**: Select which product to display from your store. * **Show title**: Displays the product name when enabled. * **Show price**: Displays the product price when enabled. * **Price size**: Controls how large the price appears on desktop. * **Price size (mobile)**: Controls how large the price appears on mobile. * **Button label**: Text for the button. Leave blank to make the entire product card clickable. * **Overlay color**: The color of the semi-transparent layer over the product image. * **Overlay opacity**: Controls how dark or light the overlay appears. #### Collection Block * **Column span (desktop)**: Number of columns this item spans horizontally on desktop (1 to 6). * **Row span (desktop)**: Number of rows this item spans vertically on desktop (1 to 4). * **Column span (mobile)**: Number of columns this item spans horizontally on mobile (1 to 4). * **Row span (mobile)**: Number of rows this item spans vertically on mobile (1 to 4). * **Collection**: Select which collection to display from your store. * **Show title**: Displays the collection name when enabled. * **Button label**: Text for the button. Leave blank to make the entire collection card clickable. * **Overlay color**: The color of the semi-transparent layer over the collection image. * **Overlay opacity**: Controls how dark or light the overlay appears. #### Article/Blog Block * **Column span (desktop)**: Number of columns this item spans horizontally on desktop (1 to 6). * **Row span (desktop)**: Number of rows this item spans vertically on desktop (1 to 4). * **Column span (mobile)**: Number of columns this item spans horizontally on mobile (1 to 4). * **Row span (mobile)**: Number of rows this item spans vertically on mobile (1 to 4). * **Article**: Select a specific blog article to display. * **Blog**: Select a blog, and the latest article will be shown. * **Blog image**: Upload a custom image to use instead of the article's featured image. * **Show title**: Displays the article title when enabled. * **Button label**: Text for the button. Leave blank to make the entire article card clickable. * **Overlay color**: The color of the semi-transparent layer over the article image. * **Overlay opacity**: Controls how dark or light the overlay appears. #### Space Block * **Hide space on desktop**: Hides the empty space block on desktop screens when enabled. * **Column span (desktop)**: Number of columns this empty space spans horizontally on desktop (1 to 6). Only visible when "Hide space on desktop" is disabled. * **Row span (desktop)**: Number of rows this empty space spans vertically on desktop (1 to 4). Only visible when "Hide space on desktop" is disabled. * **Hide space on mobile**: Hides the empty space block on mobile devices when enabled. * **Column span (mobile)**: Number of columns this empty space spans horizontally on mobile (1 to 4). Only visible when "Hide space on mobile" is disabled. * **Row span (mobile)**: Number of rows this empty space spans vertically on mobile (1 to 4). Only visible when "Hide space on mobile" is disabled. ### Presets * **Multicontent section - Bento Grid**: A starter preset with a mix of different content types including images, collections, products, articles, and videos arranged in a dynamic grid. * **Collection list - Bento Grid**: Pre-configured for displaying collections in an asymmetrical, magazine-style layout. * **Gallery - Bento Grid**: Optimized for showcasing multiple images in a creative, varied grid layout. * **Products showcase - Bento Grid**: Designed for displaying products in an eye-catching, editorial-style grid. * **Gallery - Editorial**: A sophisticated preset focused on creating magazine-style image galleries with strategic spacing. * **Blog - Bento Grid**: Designed for displaying blog articles in an attractive, varied grid format. ### Tips * Plan your grid layout before adding blocks - think about which items should be larger (spanning more columns/rows) to create visual hierarchy. * Use the Space block to add breathing room between content and create more interesting layouts. * Items with more column or row span will naturally draw more attention, so use this for your most important content. * When setting aspect ratio, remember it overrides minimum row height, so choose based on whether you want consistent proportions or flexible heights. * For mobile, you can hide spaces on desktop or mobile independently, giving you complete control over the layout on different screen sizes. * Start with a preset and modify it to match your needs - it's easier than building from scratch.