> For the complete documentation index, see [llms.txt](https://able.bucca.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://able.bucca.com/core/ks-modules/grid-view.md).

# GridView

A collection of multiple CardItems in a scrollable vertical index (list).

[Styleguide Link](https://zpl.io/adKWyRp)

* Parent: Module, Screen
* Children: [Graphic](/core/overview/graphic.md), [Section Header](/core/components/sec-head.md)

## Properties

<figure><img src="/files/703yCPea4eeWSCqsFa3j" alt=""><figcaption></figcaption></figure>

### Column

* **Single:** A single GridItem for the entire width of the screen, which collectively forms a GridRow.
* **Two:** Two GridItems for the width of the screen, which collectively forms a GridRow.
* **Three:** Three GridItems for the width of the screen, which collectively forms a GridRow.

**Note:** These are standards for the portrait mode of the small form factor (phone) style screen. In landscape mode the content adjusts its column count to maintain the same relative size as these GridItem widths to fill the landscape mode screens width, with the appropriate gutter and padding.

### Header

A header (aka SecHead) can exist at the top of a GridView and be used to separate list content into different collections under that header. That Section Header has a title and can have additional actionable icons associated with the section to take action on the collection.

### Gutter

The gutters around the content can be on or off depending on the use case.

### Surface

The background of the view can be light or dark depending on the use case. Most often when browsing photos on your device you're displaying these in the dark style, but if your looking at say, Instagram photos in a collection, those would be displayed in a light style.

## Functionality

The Graphics (Images) within the grid are set to a 1:1 ratio with the focal point being the horizontal and vertical center of the graphic. The size of the images dynamically change based on the width of a portrait format screen.

Note: If the device is in landscape format the screen accepts a 1:1 image in a 5 wide format, while still providing a vertical scroll in that landscape format. All of the padding and grid spacing remain the same.


---

# 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://able.bucca.com/core/ks-modules/grid-view.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.