Grid’s Masonry section can present up to six images with overlaying text in a grid on a page.
Use the theme editor to select a layout option, add spacing between masonry blocks, set hover interaction options, fit images into the masonry blocks, and add text and links for the Masonry section
Add this section to
Customize section settings
Click the Masonry section to customize its general settings.
Select a layout option
Grid's masonry section comes with two Layout options: Full width and Content width.
Checking Full width will make your tiles full-bleed (i.e. they will extend right to the edges of your screen).
Checking Content width will make your tiles display their images in their original dimensions, padding the sides of your Masonry section with whitespace if they are narrower than the width of the browser.
Add spacing between masonry blocks
Customize the appearance of the masonry feature by toggling Enable gutters. This will add some empty space borders between features)
Set hover interaction options
Enable text hover to hide the text until customers hover the cursor over the section block.
Enable hover animation to activate an overlay effect when the customers hover the cursor over the section block.
Hover interactions are limited to the desktop since they depend on the position of the mouse cursor to operate. Mobile devices will not display hover interactions.
Fit images into the masonry blocks
Click one of the preloaded Masonry blocks to customize its content.
Image
Click Select Image to connect your media to a block.
Each block will scale depending on how many are added. For instance, if only one feature is added, it will scale to 100% of the height and width of the masonry feature container. If two are added, they will each take up 50%.
The optimal image dimensions to use in the masonry section are 1400 x 640px, however, it's important to note that regardless of the size of your images, you could see some cropping on certain screen sizes, so avoid images with text or logos.
Add text and links
Add a Heading, Subheading, and Link using the provided fields.
Colors
Adjust the Text color with the provided dropdown menu.
Mobile optimization
To optimize the mobile experience, features can be individually set to display only on the desktop layout, or on both the desktop and mobile layouts. The reason for this is that masonry features get stacked on mobile. Having six features enabled can mean quite a lot of scrolling for users, so you may want to limit the number to two or three. Set which ones Show on mobile by checking the corresponding box.