Lists and grids: UX comparison

1) When list, when grid (rule 5 questions)

1. User goal: quickly compare parameters (list) or choose by visual/cover (grid)?

2. Data form: structure fields (table/text) → list; visual objects (skins, photos) → grid.

3. Density vs overview: need maximum items per screen (list) or uniform showcase (grid)?

4. Default action: open/details (list) or instant "Play/Buy" from the card (grid)?

5. Device context: mobile portrait - usually a 2-in-a-row grid for cards; reports/tables on desktop - list/table.

Short: compare - list; choose with your eyes - the grid.

2) Content model and IA

row-first-The main signal is text/fields. Suitable for: logs, transaction histories, reports, attribute search results.
Card-first: The main signal is the cover/preview. Suitable for: games/products, media, collections.
Hybrid: "adaptive line cards" (on mobile - a card, on a desktop - a line with columns) with the same data source.

3) Design of elements: row vs card

Row (list row)

Structure: icon/thumbnail (optional), title, 1-3 key fields, meta (date/status), contextual actions (⋮).
Strengths: readability, high density, good sortable set of columns.

UX tips: fix the height; Align to grid hide minor fields in the "reveal."

Grid card

Structure: Cover, Title, Caption/Labels (New/Jackpot), One Main CTA + Extra Action in.... ""

Strengths: Visual choice, quick action, emotional context.
UX-tips: keep aspect-ratio (e.g. 4: 3/1: 1), same heading heights, text clipping with tooltip.

4) Navigation, sorting and filters

General: filters and sorts are nearby and stable (without jumps). Active conditions - chips over results.
List: support many columns + "freeze" headers; sorting by click on the header.
Grid: sorting by drop-down list; filters - by chips/panel. For "visual" search - preview on hover/long-press.

5) Mobile vs desktop

• Grid: 2-in-a-row (phone), 3-in-a-row (tablet). Large CTAs in the thumb area.
• List: compact lines (56-72dp), collapsible meta-fields.

• Grid: 4-6-in-a-row at ≥1200px, auto-fill with 'min' card width.
• List: table/rows, column resize, quick table search.

6) States and downloads

Skeletons: skeleton lines (minimum 3-5), skeleton cards with cover and text plugs.
Empty: explain why empty and suggest presets/remove filters.
Errors: save user selection and position; give retry.

Reload: "Show more" (hybrid) is preferable to endless tape in catalogs; for logs - you can auto-scroll with "Pause."

7) Performance

Targets: INP ≤ 200ms, CLS ≤ 0.1, scroll-jank <1%.

List: string virtualization, fixed heights, deferred calculations.
Grid: lazy images (AVIF/WebP), 'srcset/sizes', predictable sizes, in "batches" of 20-60 cards.
General: 'content-visibility: auto', preview cache, load priorities for hero elements.

8) Affordability

List: tables with correct semantics ('table/thead/tbody', 'aria-sort'), focus on rows/cells.
Grid: 'role = "grid"' or list with 'role = "list"'; order in DOM = visual; captions for images.
Keyboard: arrows/Tab; Enter - open; Space - "to favorites" (if appropriate).
Click sizes: ≥ 44px; AA contrast; explicit signatures on icons.

9) Metrics and telemetry

• `view_switch(list|grid)`, `sort_change`, `filter_apply`, `card_quick_action`,
• `row_open`, `compare_open`, `results_load_batch`, `error_retry`.

• Time-to-First-Action (TTFA), qCTR results, Scroll Depth, Zero-Result Rate,
• Compare Rate (for lists), Quick-Action Rate (for grids), Latency p95.

10) A/B experiments (what to test)

Default view (list/grid) for new/returnees.
Number of items per screen, row height, card size.
Order of filters/sorting; chips vs sidebar.
Quick actions on the card (icons/text, one vs two CTAs).
Guardrails: INP/CLS, complaints about layout "jumps," Zero-Result growth.

11) Examples for iGaming

Games Lobby (B2C): Grid - Cover + Play/Demo, New/Jackpot Labels, Chip Filters (Provider/Category/Mechanics).
Provider catalog: grid of logos with the number of games; by click - provider's page (inside - also a grid of games).
Reports/Finance (B2B): list/table - NGR/GGR/FTD/CR columns, title fixing, export.
Transaction history: list - dense series, statuses, search by amount/ID/date; Expand string for parts.

Promotions/tournaments: Banner grid with dates and CTAs, sorted by "Going Now/Coming Soon."

12) Flexible switches and personalization

Give the user the "List ↔ Grid" radio button and remember the selection (per user/tenant).

Offer presets of the performance: "Tight," "Usually," "Large."

Contextual logic: for the first time - a grid in the lobby; from search - a list for exact comparison.

13) Antipatterns

Grid without fixed aspect ratio → "dancing" cards and high CLS.
A list with too many columns is a horizontal scroll without need.
Duplication of action buttons both in the card and in the hover with different behavior.
Mixing sorts/filters at each load (breaks focus).
Hidden active filters - users "lose" results.

14) Implementation checklist (step by step)

1. Define whether the screen is selected by visual or attribute comparison.
2. Define the model: list/grid/hybrid; agree IA and data sources.
3. Design a row or card with fixed key zone dimensions.
4. Sorting/filters: visible chips, stable sorting control.
5. Loading/empty/error: skeletons, friendly texts and retry.
6. Performance: lazy/virtualization, 'content-visibility', p95 goals.
7. A11y: semantics, keyboard, contrast, tap-target sizes.
8. Telemetry: TTFA, qCTR, Zero-Result, Latency p95.

9. A/B default view, dimensions, quick actions

10. Select Memory: Keep view mode and last filters.

15) The bottom line

Lists and grids are tools for different tasks.

When attributes and comparison are important, take a list.
When the visual decides and quick actions - take the grid.
Define a goal, capture dimensions and behavior, keep the interface fast and accessible - and users will achieve results in fewer steps, without unnecessary cognitive noise.