Using Adobe XD Repeat Grid to Build Horizontal Lists Without Plugins

Quick answer

To create a horizontal list of six identical cards in Adobe XD, select a single card and choose Object → Repeat Grid → Grid by Row. Set the grid to 1 row × 6 columns with 24 px horizontal spacing and 0 px vertical spacing. The first cell remains the master; editing its content or size updates all instances, while you can override individual cells for quick variations.

How the Repeat Grid works

A Repeat Grid is a layout helper that duplicates a selected master object into a matrix defined by rows, columns and spacing. The master is always the top‑left cell (when using Grid by Row) or the top‑left cell (when using Grid by Column). Changes to the master’s properties—such as text, image fill, or dimensions—propagate to every instance. You can break the link on a specific cell by editing its content directly; an override indicator (a small dot) appears in the Properties panel to show that the cell no longer follows the master.

Step‑by‑step configuration

1. Draw a card: rectangle (width = 200 px, height = 120 px), add an image placeholder and a text label.
2. Select the card.
3. From the menu bar choose Object → Repeat Grid → Grid by Row.
4. In the Properties panel that appears on the right, set:
• Rows: 1
• Columns: 6
• Horizontal spacing: 24 px
• Vertical spacing: 0 px
5. Press Esc to exit the grid editing mode.

After these steps you will see six cards spaced evenly horizontally. The leftmost card is the master; editing its text, for example, changes the text in all six cards.

Limits and common mistakes

What Repeat Grid cannot do

• No live data binding: It only duplicates visual objects; you cannot feed it JSON or a CSV file.
• No nesting: You cannot place a Repeat Grid inside another Repeat Grid.
• Performance: Very large grids (e.g., > 50 × 50) make the canvas sluggish because each instance remains a live object.
• Destructive conversion: Choosing Object → Ungroup or Convert to Individual Objects breaks the repeat relationship permanently.

Typical errors

• Editing a non‑master cell and wondering why changes don’t spread – remember that only the first cell (master) drives propagation.
• Leaving the grid group unlocked and accidentally nudging a card, which disrupts the uniform spacing.
• Assuming that changing a component property outside the grid (e.g., in the Assets panel) will update existing grid instances – it will not; you must edit the master inside the grid.
• Choosing Grid by Column when you need a horizontal list; this flips the duplication direction and produces a vertical stack instead.

Verification checklist

1. Open Adobe XD desktop (any recent build; the feature is frozen after the 2023 feature freeze).
2. Create a simple rectangle, select it, and open Object → Repeat Grid – you should see row and column fields in the Properties panel.
3. Apply the configuration above, edit the master’s text, and confirm that all six instances update instantly.
4. Try overriding the third card’s text; a dot should appear next to the text field in the Properties panel for that cell, indicating the override.
5. Check Help → About to note the XD build version and verify that the Repeat Grid options are still present.

If the grid does not behave as described, ensure you are editing the top‑left master cell and that the group lock icon (in the Layers panel) is engaged.

Practical tip

When you need a quick variation (e.g., a highlighted card), override only that cell’s fill color or text style. This keeps the rest of the list synchronized while allowing a single exception.