# List Grid Element

The List Grid element allows you to display multiple items in a compact, visual grid. It’s perfect for showing categories like “Shop by Department”, “Top Picks”, or “Explore More”. Each item can have an image, label, and a link to another screen or website.

{% tabs %}
{% tab title="Custom Tab" %}

## <mark style="color:green;">Add Items to Your Grid</mark>

### Title and CTA

* Show Title – Toggle on/off to display a heading above your grid (e.g., “Top Selling Products”)
  * Title Text – Enter your heading text
* Show CTA – Add a small “See All” link on the right
  * CTA Label – Customize the link text (e.g., “See All”, “Explore”)
* Action URL – Link to another screen or external site

### List Items

You can add as many grid items as you want. For each item, you can:

* 🖼️ Upload an Image and select background color
* ✏️ Add a Title (e.g., “Fruit & Vegetables”)
* 🔗 Link it to a URL or screen (in settings for each item)

📌 **Tip**: Use square or round icons for a clean and uniform grid look.
{% endtab %}

{% tab title="Settings Tab" %}

## <mark style="color:green;">Design & Customization</mark>

### 📐 Layout

* Choose List Type: Set to Grid List by default
* Columns: Choose how many items per row – 1, 2, 3, or 4
* Spacing Between Items: Adjust spacing using the slider (e.g., 10px)

### 🖋 Title & CTA Style

Customize the section heading and call-to-action (CTA) link:

* **Title**:
  * Text Style (e.g., Body Medium)
  * Color (custom HEX or theme-based)
* **CTA**:
  * Text Style (e.g., Label Large)
  * Color (custom HEX or theme-based)

### 🗂️ Card Style

This section controls how each list item looks inside the grid.

* **Ratio**: Set aspect ratio (e.g., 1:1 for square)
* **Text Position**:
  * On Image (overlay text on image)
  * Under Image (text below image)
* **Text Alignment**: Left, Center, or Right
* **Image Style**:
  * Display Mode: Fit (contain) or Fill (cover)
  * Corner Radius: Adjust roundness from square to fully rounded
  * Apply Overlay: Toggle overlay for better text contrast when text is “On Image”

### 🏷️ Item Fields

Customize the style of the individual item titles:

* Text Style (e.g., Body Medium)
* Color (HEX or theme)
* Margins (Top, Bottom, Left, Right) – adjustable using sliders

### 👁️ Visibility Settings

Like other elements, control when and where your List Grid appears:

* Platform: Android, iOS, or All
* Device: Mobile, Tablet, or All
* User: Guest, Logged-in, or All
  {% endtab %}
  {% endtabs %}

## <mark style="color:green;">📱 Use Cases</mark>

<div align="left"><figure><img src="/files/9I0R1TWeOpGbc7RkkXvO" alt="" width="237"><figcaption></figcaption></figure></div>

* 🍎 Category list (e.g., Fruits, Dairy, Bakery)
* 🛍️ Shop sections (e.g., Men, Women, Kids)
* 🧭 Navigation shortcuts (e.g., About, Services, Contact)

***

## ✅ <mark style="color:green;">Summary</mark>

| Tab         | Customization Options                               |
| ----------- | --------------------------------------------------- |
| Layout      | Columns, spacing, list type                         |
| Title & CTA | Text style and color                                |
| Card Design | Image ratio, text position/alignment, corner radius |
| Item Fields | Title font, color, and margins                      |
| Visibility  | Show by platform, device, or user role              |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.twinr.dev/native-screen/list-element/list-grid-element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.