Grid’s Masonry section can present up to six images with overlaying text in a grid on your homepage.
Add a masonry section
To include this section on your home page, navigate to the Sections tab of the theme editor and select Add section > Masonry.
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)
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.
Fitting images into the masonry blocks
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 is 2000 x 2000px, however it's important to note that regardless of the size of your images, you could see some cropping on certain screen sizes, so we recommend avoiding images with text or logos.
Add text and links
This is where you'll add each of your features. You can add a Heading, Subheading, and Link here if you wish (note that you do not have to use all or even any of these fields). You'll set the Text color (black or white) using the dropdown menu.
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. You can set which ones Show on mobile by checking the corresponding box.