Skip to main content

Create a list or responsive card-grid locator

Use Store List → Display → List (flex / grid) for conventional results.

Vertical list​

  1. Select Layout → Flex.
  2. Select Direction → Stacked.
  3. Set Gap between results.

Each Store Card spans the Store List widget width. This works well beside a Map.

Wrapping horizontal cards​

  1. Select Layout → Flex.
  2. Select Direction → Row (wrap).
  3. Design the selected Store Card with a suitable width/max-width.

Cards wrap to another line when space runs out.

Responsive grid​

  1. Select Layout → Grid.
  2. Set Min column width, for example 300.
  3. Select Column fill → Auto-fill or Auto-fit.
  4. Set Gap between results.

The grid packs as many columns as fit without making a column narrower than Min column width. Auto-fit collapses unused tracks and stretches existing cards; auto-fill can retain empty track space.

Pagination and height​

Set Results per page independently of columns. For three columns and visually complete rows, start with 6, 9, or 12 results. Enable fixed-height scrolling only when the Store List shares height with a Map; verify Load more does not jump the surrounding page.