> For the complete documentation index, see [llms.txt](https://cardstock-studio.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cardstock-studio.gitbook.io/docs/design/templates-design-your-cards/layers/fan-grids.md).

# Fan Grids

<mark style="color:$success;">**Fan Grids**</mark> are useful for displaying cards in a row or a "fan" shape, popular when making rules in the Book canvas.

<figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FYMTSIXrBsegXt5kqKyM8%2FScreen%20Recording%202026-06-07%20at%203.50.57%E2%80%AFPM.gif?alt=media&amp;token=5f2eb400-d3bd-40a1-9fd8-86891420147b" alt="" width="420"><figcaption></figcaption></figure>

The various controls in the Fan Grid component determine how the fan appears, with cards being presented around the circumference of a virtual circle. Any child of the Fan Grid layer will be displayed — Images, text, shapes, etc.

<div><figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FUSavorcwYJL7BiTosTTU%2FScreenshot%202026-06-07%20at%203.54.32%E2%80%AFPM.png?alt=media&amp;token=03ff81ec-0d3f-4c7c-99da-5f1a3417cba8" alt=""><figcaption></figcaption></figure> <figure><picture><source srcset="/files/3X9ODVMQXPCddMVblZaN" media="(prefers-color-scheme: dark)"><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FBJTtHu4W38uESuk6V98f%2FScreenshot%202026-06-07%20at%203.54.38%E2%80%AFPM.png?alt=media&amp;token=ae2f2617-d873-4e25-b008-ef282f6d8b93" alt=""></picture><figcaption></figcaption></figure></div>

***

## Curl

At value 0, the cards appear in a straight line, and on a curve of a circle at value 1. Values between will interpolate between the two.

<div><figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FiGEjrLNzG8K7MJhKbj64%2FScreenshot%202026-06-07%20at%203.58.18%E2%80%AFPM.png?alt=media&amp;token=70027b7c-720b-4371-8710-6940c051c4cb" alt=""><figcaption></figcaption></figure> <figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FLVTNE4LYvYQMsqP9DBA4%2FScreenshot%202026-06-07%20at%203.58.21%E2%80%AFPM.png?alt=media&amp;token=765eeb1a-22a6-419f-84a7-2da60dad2a02" alt=""><figcaption></figcaption></figure></div>

The tilt of the card is controlled by the *Tilt* paramter, described below.

***

Spacing

When *Curl* = 1, *Spacing* is unavailable and has no effect.

<figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FyCaH0T8nr2LaGpzatSZr%2FScreen%20Recording%202026-06-07%20at%204.01.06%E2%80%AFPM.gif?alt=media&amp;token=f878b06d-e6df-4e5f-918e-86cc031a362b" alt="" width="563"><figcaption></figcaption></figure>

Spacing controls the amount of space between items.

***

## Radius & Spread

*Radius* and *Spread* are unavailable and have no effect when *Curl* = 0.

<figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FmdRVmCy8nZVbesrLOTQ7%2FScreen%20Recording%202026-06-07%20at%204.03.33%E2%80%AFPM.gif?alt=media&amp;token=04252b31-818a-4a62-9685-36e99bf2a57c" alt="" width="361"><figcaption></figcaption></figure>

*Radius* controls the size of the virtual circle used for the fan effect. At negative values, the cards are spread around a circle in the opposite direction.

<figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2F08gq4bT0AN2FCM7Gqzg5%2FScreen%20Recording%202026-06-07%20at%204.04.09%E2%80%AFPM.gif?alt=media&amp;token=e8481c6d-c507-4b4c-8c53-abb3c9106f44" alt=""><figcaption></figcaption></figure>

*Spread* determines how many degrees around the circle each item will be placed. With 5 items, a value of 72 spaces them equally around the circle (360 / 5 = 72).

***

## Tilt

*Tilt* determines the tilt amount each individual item receives, relative to the one before it. Negative values can be used.

<figure><img src="https://2449056524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK6BdQXak9wiY4BdSf9Rq%2Fuploads%2FlHEU3Q6dyDwfH6CvqGt7%2FScreen%20Recording%202026-06-07%20at%204.08.04%E2%80%AFPM.gif?alt=media&amp;token=369d61a7-6fea-42ca-93d8-eccca70524a9" alt=""><figcaption></figcaption></figure>

***

## Start & Maintain Center

*Start* determines the initial rotation — at 0, it's "straight up and down". Keeping *Maintain Center* toggled on will ensure the center of the fan remains at that point, otherwise new items are added around from that start rotation.

***

## Show all Children

By default *Show all Children* is on and all items will be displayed. When false, you can choose a set number of items to display.


---

# 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://cardstock-studio.gitbook.io/docs/design/templates-design-your-cards/layers/fan-grids.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.
