> 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/grids.md).
# Grids
**Grids** will automatically position their children along a Grid, with options to determine the spacing, size, order, and direction of the Grid.
The Grid area can be styles with Components, and the individual **Cells** can also have styling which will display on each Cell.
Children will be positioned automatically, but can scale as they'd like, and children of children can be repositioned relative to their own parent.
***
## Cell Template Styling
Each Grid comes with a **Cell Template** child Layer is NOT included in the grid, but any Components added to this Layer will affect the style of each Cell in the Grid, including any child layers.
In this example, the "Circle" Layer is a child of the Cell Template, and positioned outside of the Cell area.
***
## Mask Cell Area & Mask Children
Toggle in the Grid properties to clip children of the Cell Template that is outside of the Cell area.
Toggle in the Grid properties to clip items in the cells, and their children, to within the Cell area.
***
## Cell Size & Spacing
*Cell W* adjusts the width, and *Cell H* the height of the cells. *Sp W* and *Sp H* will change the spacing between cells horizontally and vertically.
***
## Fill Orientation & Direction
*Fill Axis* determines which axis takes priority when adding new cells. "Horizontal" means cells will be added to fill a row before a new column is created.
*H Dir* determines which direction rows will be filled in — Left to right or right to left. *V Dir* handles the vertical direction. Default values start at the top left, and fill to the right, then down, with the *Fill Axis* set to "Horizontal".
*H Align* and *V Align* determine where in the Grid area the starting cell will appear. If you want cells to always be in the bottom left corner of a card, with new cells appearing to the right, set *H Align* to "Left" and *V Align* to "Lower".
***
## Row & Column Constraints
Adjust the *Constraints* value if you'd like to enforce a specific number of rows or columns. "Flexible" means the Grid will fill it's space based on the *Fill Axis*, and *H Dir* and *V Dir* values, before overflowing.
"Fixed Rows" or "Fixed Columns" allow you to define a specific number of rows or columns before the Grid will overflow. The example on the left has "Fixed Rows" with "1" row, while the example on the right is "Flexible".
***
## Visible Child Count
With *Show all children* toggled on, all children will be shown with extras overflowing the Grid area. Otherwise, you can specify a number of visible children.
Linking this value to a [Variables](/docs/design/templates-design-your-cards/variables.md) is useful in revealing a dynamic number of Cells based on the Variable, for each Card in the Deck.
{% hint style="success" %}
A child layer that is turned off is not considered a "child", and will not be displayed.
To display an empty cell, either turn "Total Opacity" to 0 in the child Layer, or add an empty Layer as a child.
{% endhint %}
***
## Content Size Fitter
The **Content Size Fitter** Component will force the Grid area to match the size of the children in the cells.
This is useful for creating an area that grows with the number of cells. In this example, the Grid has 5 children. The Grid itself has a *Outline*, *Curved Edges*, and the *Content Size Fitter* Components.
And here is the same Grid, but with only 3 children. Note that the **Pivot** of the Grid *Transform* is centered, so the area shrinks equally on the left and right.
If we had set the Pivot to the left, then the Grid would shrink in only one direction, toward the Pivot.
---
# 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/grids.md?ask=&goal=
```
`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.
in the Grid properties to clip items in the cells, and their children, to within the Cell area.
