Axure Tutorial: Make Masonry Layout Cards


This tutorial introduces the method of making masonry Layout Cards with repeater, which supports deleting the cards and automatically filling the positions after deletion, so as to ensure the integrity of masonry layout.

Features to be Realized

Masonry Cards

1. The images in the card have different heights, so as to realize the masonry layout.

2. When deleting a card, the following card will be filled automatically.

How to Realize these Features

1. Make cards list through repeaters. And the height of the image in the card is adjusted according to the data of the corresponding column of the repeater. So as to realize the masonry style layout. 

2. Sets the context panel to show when the card is hovered. When you click any button on the panel, delete the current row of the repeater and add a new row.

Preview the completed prototype for this tutorial

Widgets Setup

Drag a repeater card

1. Drag a Repeater-Card widget into the canvas and adjust its image, heading and paragraph to the appropriate position. Because we want to make a layout of 2 columns and 8 items, we need to add more data.

 Create a dynamic panel for the image

2. We need to create a dynamic panel for the image widget so that the aspect ratio will not change when the picture is enlarged. We will use it in the following settings. Name the image widget Image and the image dynamic panel Image Panel.

Text panel creating

3.Create a rectangle, set the bottom round corner to 6 pixel, add color, and select the title and paragraph text to create a dynamic panel named Card text. Group the Image Panel, Heading and paragraph text and name it card.

Repeat layout settings

4. Set the repeater layout to "Vertical" and "Warp(Grid)", and the number of items in each row is 4.

Note: the number of items in each row can be set to any value m, for example, the number of data row written in the repeater = 2m, and the waterfall flow is shown in two columns; If the number of data rows written in the repeater = 3M, the waterfall flow is displayed as three columns... And so on.

Set the repeater Pagination to Multiple Pages, the number of Items per page is 8, and the Starting page is 1.

Set the repeater Row Spacing = 10, Column Spacing = 10.

 Hover Scrim and buttons making

4. Make a card hovering scrim and add 3 buttons in the middle. Group 3 buttons and name it ButtonsGroup the three buttons and scrim and name it Context.

Interactions Setup

Repeater interactions

Interactions setup

1. First, adjust the size of the Image Panel when item loaded. The size of the dynamic panel is set to the size of the Height column of the repeater table.

Set image size

2. Set the Image height to the height of the Image Panel. Then set the width of the Image to the height of the Image Panel / the height of the Image * the width of the Image. In this way, the width of the Image is set to keep the aspect ratio unchanged and included in the Image Panel. 

3. Move the Text panel to the bottom of the Image Panel and subtract the rounded pixels 6px to ensure that the rectangle color completely fills the rounded corners.

4. Set the size of the scrim as large as the card (the width is the width of the Image Panel and the height is the height of the Card).

5. Move the Buttons to the vertical center of the scrim.

Context widgets interactions 

Mouse enter event of card

1.Select the Card, set to hide the Context when the Mouse Enter.

2.Group the Card and Context, set to hide it when the Mouse Exit.

Masonry Layout Cards Scrolling interaction

Cards scrolling interaction

Create the repeater as a dynamic panel, adjust its size, unselect Fit to Contentand right-click to set Scrollbars to Scroll Vertical.

Finally, adjust the background style and add a mobile phone mockup to the interface.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).

Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.

Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

This section doesn’t currently include any content. Add content to this section using the sidebar.