# Masonry

> Create a gallery that demands to be explored — display images and videos in a stunning brick-style masonry layout that adapts beautifully to any content.

URL: https://sectionstar.app/sections/masonry/
Source: Section Star — https://sectionstar.app
Updated: 2026-10-26T00:00:21.889Z

---

**Masonry** is a Shopify theme section in the Section Star library. Create a gallery that demands to be explored — display images and videos in a stunning brick-style masonry layout that adapts beautifully to any content.

## About the Masonry section

The Masonry section is a versatile and visually appealing way to display a mixture of images and videos in a grid layout. The section's responsive design ensures that your media content looks great on any device. You can easily adjust various settings, such as the number of columns, spacing between items, and media appearance options, to customize it to your store's aesthetic.

## Live demo

## Use cases

1. **Product Gallery:** Showcase your product images and videos in an engaging grid layout. This is useful for stores with diverse product lines, giving customers a clear and attractive visual experience.
2. **Customer Testimonials:** Feature customer testimonial videos alongside images of happy customers using your products, providing social proof and enhancing credibility.
3. **Blog Visuals:** Create a rich media section for your blog articles by embedding related images and videos to accompany your text content.
4. **Portfolio Display:** Use the masonry section to present a portfolio of your work, ideal for businesses such as photographers, designers, or architects.
5. **Event Highlights:** Recap events through a mix of pictures and videos, perfect for stores that host or participate in events and want to showcase memorable moments.

## Settings

Every setting below appears in the Shopify theme customizer once the section is published.

### Grid Design
Set settings for the grid

| Setting | Type | Default |
| --- | --- | --- |
| Columns | Select (1, 2, 3) | 2 |
| Gap Between Images | Number | 10 |

### Media Design
Set the display of the media elements

| Setting | Type | Default |
| --- | --- | --- |
| Image Width | Number | 1000 |
| Mobile Image Width | Number | 600 |
| Zoom on Hover | Checkbox | On |
| Show Big Play Button | Checkbox | On |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |

### Headline
Set text for the headline

| Setting | Type | Default |
| --- | --- | --- |
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample Headline</b> |
| Text | Inline rich text | Use this block to add a description. … |
| Spacing between Headline and Features | Number | 15 |

### Image block settings

| Setting | Type | Default |
| --- | --- | --- |
| Image | Image | — |
| Optional Link | URL | — |

### Video block settings

| Setting | Type | Default |
| --- | --- | --- |
| Video | Video | — |
| Optional Link | URL | — |
| Play Inline | Checkbox | On |
| Autoplay | Checkbox | Off |
| Loop Video | Checkbox | On |
| Show Video Controls | Checkbox | Off |
| Mute Video | Checkbox | On |

### External Video block settings

| Setting | Type | Default |
| --- | --- | --- |
| Video | Video URL | — |
| Video Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, 9:16, 9:21) | 16 / 9 |