Flowmo App Help Center

Responsive cards section with minimum and maximum width

We’ll create a responsive cards section that adapts from three columns to two and one, using auto layout and min/max width settings.

I

Written by Inbal Shemesh

Updated over 3 months ago

Step 1: Set up your structure

Your layout should follow this structure:

A section frame (the parent)
Inside it, a frame named cards — containing 3 card components
All frames use Auto Layout
Set Height = Hug for both the section frame and the cards frame
→ So the height adjusts when content reflows on narrower screens

Step 2: Initial layout settings

On the cards frame:

Layout: Horizontal Auto Layout
Width = Fill
Height = Hug
Set spacing between items to 32px

Each card frame:

Width = Fill
Height = Fixed (e.g. 448px)
Content inside the card should also use Fill,
→ except for fixed-size elements like icons or buttons

Step 3: Enable wrapping and responsive behavior

Select the cards frame
In the Auto Layout settings, turn ON: Wrap
→ This allows cards to break to a new row
Select all three cards
Open the Advanced section in the Layout menu
Set:
- Min width = 280px
- (Optional) Max width = 420px

Result

As screen width shrinks, cards will break into fewer columns
Once a card reaches 280px, it wraps to the next line
Since cards are set to Fill, they’ll expand — but no wider than Max width
This creates a smooth responsive layout that stays visually consistent