Masonry
The images are all different heights—do not crop them into one size, just let new ones tuck under the short ones.
You can say this to an AI Agent
Change the portfolio wall to masonry: equal column widths, images keep their natural ratio, and each new image fills the shortest column; collapse to one column on phones. Then verify on desktop and mobile: no full-row gaps below short images, and the content order still makes sense when scrolling.
Card Grid keeps strict rows and equal-height cards for scanning and comparison; Masonry drops row alignment for compactness and suits browsing.
Bento Grid assigns cell sizes to express a designed priority; Masonry positions come from an automatic packing rule and express no priority.
When to use it
- Gallery walls where photos and illustrations keep their natural ratios
- Inspiration and asset feeds built for continuous browsingKeep scrolling to load more
- Product or case covers with inconsistent sizes that should stay compactNoise-canceling headphones¥ 899Eye-care desk lamp¥ 199
- Growing collections where packing saves more height than tidy rows
When NOT to use it
- Content with a strict order, such as steps or timelinesStep 1Step 2Step 4 lands ahead of Step 3
- Row-by-row comparison of similar fields, where misalignment hurts
- Keeping multiple columns on phones until cards become too narrow
- Long-form article lists, where packing breaks continuous reading
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗