> For the complete documentation index, see [llms.txt](https://codalin.gitbook.io/nodalin-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codalin.gitbook.io/nodalin-docs/nodes-reference/sources/grid.md).

# Grid

<table data-header-hidden><thead><tr><th width="141.6597900390625"></th><th></th></tr></thead><tbody><tr><td><div><figure><img src="https://937151318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F44MuVIHBk5o5yfcGn64w%2Fuploads%2FmZg3FJ2e2PYvoYkVsYK7%2Fimage.png?alt=media&amp;token=492a42de-3284-4e3b-a46b-4fe3f52225eb" alt="" width="76"><figcaption></figcaption></figure></div></td><td>Creates a grid layout with configurable rows, columns, and spacing. Can be used as a standalone visual grid or as an <a href="/nodalin-docs/how-to.../instancing.md">instancing</a> source to distribute shapes across grid positions. Automatically switches between CPU and GPU rendering for optimal performance. </td></tr></tbody></table>

<table><thead><tr><th width="154.9609375">Property name</th><th width="404.57421875">Description</th><th>Compatible datatype</th></tr></thead><tbody><tr><td>rows</td><td>Number of rows</td><td>number</td></tr><tr><td>columns</td><td>Number of columns</td><td>number</td></tr><tr><td>spacingX</td><td>Horizontal spacing</td><td>number</td></tr><tr><td>spacingY</td><td>Vertical spacing</td><td>number</td></tr><tr><td>x</td><td>Horizontal position</td><td>number</td></tr><tr><td>y</td><td>Vertical position</td><td>number</td></tr><tr><td>rot</td><td>Grid rotation</td><td>number</td></tr><tr><td>color</td><td>Grid line color</td><td>color</td></tr><tr><td>strokeWidth</td><td>Grid line width</td><td>number</td></tr><tr><td>origin</td><td>Center point of the shape. Defaults to (0, 0). Changing it moves the shape’s pivot without affecting its x and y position.</td><td>point</td></tr><tr><td>zindex</td><td>Controls which element appears on top when elements overlap; higher values sit above lower ones.</td><td>number</td></tr><tr><td>instance</td><td>Instancing target</td><td>figure</td></tr><tr><td>instanceIndex</td><td>Displays the instance with the given index number</td><td>number</td></tr><tr><td>instanceMatrix</td><td>Select multiple instances by comma-separated indices, e.g. <code>5, 10, 3, 16</code></td><td>text</td></tr></tbody></table>

{% hint style="info" %}

* The `strokeWidth` property is available when a Color node is connected to the `outline`
* The `zindex` increases automatically, unless there's a connection to it.
* The `instanceIndex` and `instanceMatrix` properties are available when a Source node is connected as an instancing target. Instancing index and matrix values cycles back when the provided value exceeds the available number of instances.&#x20;
  {% endhint %}

### Example Projects

[**Synthetic Aetherin**](https://app.nodalin.xyz/project/fdca1f43-e78c-4bbe-a185-90deb1361324)\
In this simple graph, some of the Grid nodes properties are driven by a couple of Wave nodes, creating this hypnotic visual.

[**Tesser Polyra**](https://app.nodalin.xyz/project/cc2955d8-62b8-4ee1-9ca8-6db1396cc7b9)\
Using a Grid node with a single column and a few rows.

[**Quantum Synthtron**](https://app.nodalin.xyz/project/5f33f11d-7e0a-4702-88c2-e8cd4461ed71)

[**Instancing Sardins**](https://app.nodalin.xyz/project/6a99ffbb-4ba4-48d0-bba7-536c4b80a7a5)\
The last two examples demonstrates how the Grid node is capable of working in [nested instancing](/nodalin-docs/how-to.../instancing.md) scenarios. For example in "Instancing Sardins", an instancing group of 12 circle instances (Circle <i class="fa-arrow-right">:arrow-right:</i> Triangle <i class="fa-arrow-right">:arrow-right:</i> Square), is instantiated for each grid vertex, creating a swarm of digital sardins). Each group carries a set of effects ([Chromatic](/nodalin-docs/nodes-reference/effects/chromatic.md) and [Trail](/nodalin-docs/nodes-reference/effects/trail.md)). This is a 14 by 14 grid, therefore 14 x 14 x 12 = 2352 instances are processed on each frame!

<div data-with-frame="true"><figure><img src="https://937151318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F44MuVIHBk5o5yfcGn64w%2Fuploads%2Fz5P7ryYvE1zUSy6q4eqs%2Fsardin.gif?alt=media&amp;token=5900a644-f8a8-4e70-b21a-764fafedf731" alt=""><figcaption></figcaption></figure></div>