> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/native-screen/list-element/list-grid-element.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.