Repeat Grid and Content Variations for Realistic Wireframes

What Repeat Grid Is (and When to Use It)

Repeat Grid is designed for quickly building and editing list-based layouts where the same structure repeats: product cards, rows in a table, photo grids, and feed-style lists. Instead of duplicating groups manually, you create one “master” item and let XD repeat it in rows and/or columns. You can then resize the grid, adjust spacing, and inject real content (text and images) to create believable variation while keeping the layout consistent.

Use Repeat Grid when you need speed and consistency for repeated patterns. Avoid it for one-off sections or when each item’s structure is fundamentally different.

Hands-on Scenario: Build a Product List Screen

You will create a product list screen for an ecommerce app: a vertical feed of product cards with an image thumbnail, title, short metadata line, and price. Then you’ll populate it with varied titles and images, and refine spacing and typography so the wireframe is readable without drifting into high-fidelity styling.

Step 1: Create One Product Card (the “Master” Item)

• Draw the card container: Create a rectangle for the card background. Keep it simple (light fill, subtle border if needed). Avoid shadows and detailed styling.
• Add an image placeholder: Add a rectangle on the left (or top) to represent the product image. Use a neutral fill (e.g., light gray) so it reads as a placeholder.
• Add text fields: Add three text objects:
  • Product title (1–2 lines)
  • Metadata (e.g., category or short descriptor)
  • Price
• Align and space: Use consistent padding inside the card. Keep the hierarchy clear: title largest, metadata smaller, price emphasized but not styled like final UI.
• Group the card: Select the card background and all its contents and group them. This group will become the Repeat Grid unit.

Tip: If you expect titles to wrap, set the title text box width to the intended column width and allow it to wrap naturally. Keep the card height tall enough to handle a two-line title without breaking the layout.

Step 2: Convert the Card into a Repeat Grid

• Select the grouped card.
• Enable Repeat Grid (in the right panel).
• Drag the green handle downward to create multiple rows (e.g., 8–12 items for a scrollable list).

Step 3: Control Spacing Between Items

• Hover between repeated rows until you see the spacing control.
• Drag to adjust vertical spacing (gutter) between cards.

Choose spacing that supports scanning: enough separation to distinguish items, but not so much that the list feels sparse. For wireframes, clarity beats aesthetics.

Continue in our app.

• Listen to the audio with the screen off.
• Earn a certificate upon completion.
• Over 5000 courses for you to explore!

Or continue reading below...

Download the app

Resizing Behavior: Make the Grid Work Like a Real Layout

Resize the Grid (Rows and Columns)

Repeat Grid can expand in one direction (a feed) or two directions (a grid of cards).

• Add/remove rows: Drag the bottom handle up/down to change the number of rows.
• Add/remove columns: Drag the right handle left/right to create a multi-column layout.

Resize the Card Unit Without Breaking It

When you resize the master card (the first item), the entire grid updates. This is useful for testing different densities (compact vs. comfortable).

• Adjust card height to accommodate longer titles or additional metadata.
• Adjust image placeholder size to change emphasis (thumbnail vs. larger preview).
• Keep padding consistent: If you change the card width, re-check internal spacing so text doesn’t feel cramped.

Practical check: After resizing, scan the list quickly. Can you distinguish title vs. metadata vs. price in under two seconds? If not, increase typographic contrast (size/weight) rather than adding visual decoration.

Populate with Realistic Variation: Import Text

Wireframes become more believable when repeated items don’t all say “Product Name.” Repeat Grid lets you inject multiple lines of text so each card looks different while keeping structure consistent.

Step-by-step: Prepare a Text File

Create a plain text file where each line represents one item’s value for a specific text field. For example, make three files: one for titles, one for metadata, one for prices.

Wireless Noise-Canceling Headphones
Stainless Steel Water Bottle, 1L
Compact Travel Umbrella
Ergonomic Office Chair
Ceramic Pour-Over Coffee Set
Portable Bluetooth Speaker
Running Shoes (Men's)
Minimal Desk Lamp

Step-by-step: Drag Text into the Grid

• Double-click into the Repeat Grid to target items.
• Drag the titles text file onto the title text object in the first card. XD distributes each line across the repeated items.
• Repeat for metadata and price by dragging each file onto the corresponding text object.

Tip: Include a few long titles to test wrapping. This reveals whether your card height and line spacing are robust.

Populate with Realistic Variation: Import Images

Using varied thumbnails makes the list feel like real content and helps you evaluate scanning behavior (how quickly users can distinguish items).

Step-by-step: Prepare an Image Folder

• Create a folder of product-like images (or placeholders) with consistent aspect ratio if possible.
• Include a mix of light and dark images to test contrast against your placeholder background.

Step-by-step: Drag Images into the Grid

• Select the Repeat Grid.
• Drag the entire image folder onto the image placeholder rectangle in the first card.
• XD fills each repeated placeholder with a different image from the folder.

Practical check: If images look cropped awkwardly, adjust the placeholder’s size or aspect ratio. For wireframes, it’s okay if images are imperfect, but they should read as distinct items.

Common Layout Patterns You Can Build Fast with Repeat Grid

1) Card Lists (Vertical Feed)

Best for product lists, search results, and content feeds.

• One column, many rows.
• Focus on consistent padding and clear text hierarchy.
• Use varied titles/images to test scanning and density.

2) Image Grids (Gallery or Category Tiles)

Best for browsing categories or visual collections.

• Create one tile with an image placeholder and a label.
• Repeat in rows and columns.
• Adjust horizontal and vertical gutters independently.

3) Table-like Rows (Data Lists)

Best for admin-style lists or settings lists where each row has multiple columns.

• Build one row with aligned text columns (e.g., Name, Status, Date).
• Repeat vertically.
• Use text import to vary values and reveal alignment issues.

4) Feed Layouts with Mixed Emphasis

Repeat Grid works best when each item has the same structure. If you need occasional “featured” items, consider separating the featured card from the grid and placing it above, then use Repeat Grid for the standard items below.

Refine Spacing and Typography Without Going High-Fidelity

Make the Wireframe Readable

• Typography: Use 2–3 sizes max (e.g., title, secondary, small). Use weight for hierarchy rather than color styling.
• Line length: Keep title text boxes constrained so wrapping is predictable.
• Line spacing: Increase slightly if titles wrap; cramped lines reduce scanability.
• Whitespace: Prefer consistent padding and gutters over decorative separators.

Handle Long Titles Gracefully

Long titles are useful stress tests. If long titles cause the card to feel crowded:

• Increase card height slightly, or
• Reduce title size by a small increment, or
• Limit title to two lines and ensure metadata/price still align cleanly.

In low-fidelity wireframes, you can also represent truncation by shortening a few titles manually (e.g., “Ergonomic Office Chair…”), but keep most titles realistic to test layout behavior.

Keep Visual Fidelity Low While Improving Clarity

• Use neutral grays; avoid brand colors and polished imagery treatments.
• Avoid detailed icons and effects; rely on spacing and hierarchy.
• Use simple dividers only if they improve readability (e.g., a 1px line between rows in a table-like list).

Troubleshooting and Practical Checks

Grid Spacing Feels Inconsistent

• Re-check that you’re adjusting the Repeat Grid gutter (between items), not moving individual items inside the master card.
• Ensure the master card’s internal padding is consistent before repeating.

Text Import Doesn’t Map Correctly

• Confirm you dragged the text file onto the correct text object (title vs. metadata vs. price).
• Ensure each value is on its own line in the text file.

Images Don’t Fill the Placeholder as Expected

• Adjust the placeholder rectangle’s aspect ratio to better match your image set.
• Use a consistent image set when possible to reduce extreme cropping differences.

Reality Check: Does the Screen Communicate Structure?

Before moving on, verify:

• You can identify each product card quickly.
• Titles vary and wrap naturally without breaking the layout.
• Spacing supports scanning (not too tight, not too loose).
• The wireframe looks realistic enough to discuss content and hierarchy, but not so styled that stakeholders confuse it with final UI.