Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

This course is the most refreshing take on teaching design that I've come across.

— Mikaël Sévigny, Developer

Grid Fieldtype

The grid fieldtype is a meta fieldtype, a fieldtype that serves as a container for more fieldtypes. Any fieldtypes. Think of Grid as a spreadsheet, where each column contains any fieldtype, including another Grid. We lovingly refer to these as Inception Grids. Let's go deeper.

Grid Fieldtype UI
The Grid Fieldtype in action!


You can use any fieldtypes inside a Grid. Just remember that because you can doesn't mean you should. Your UI experience will vary greatly. Make sure to compare the experience with the other meta-fields: Replicator and Bard.

Data Structure

The Grid field creates a YAML collection (associative array).


The example below would have the following data which can be looped through as a tag pair with access to the column data as variables.

actor: Mark Hamill
character: Luke Skywalker
actor: Harrison Ford
character: Han Solo
<h3>Star Wars Cast</h3>
{{ cast }}
<li>{{ character }} played by {{ actor }}</li>
{{ /cast }}
<h3>Star Wars Cast</h3>
<li>Luke Skywalker played by Mark Hamill</li>
<li>Han Solo played by Harrison Ford</li>



integer *0*

The minimum number of required rows.



The maximum number of rows allowed. Once reached the Add Row button will disappear.



A list of fields, each of which create their own column.


string *table*

The Grid is displayed as a table by default. If you have a large number of columns it can get pretty crowded. Choose stacked mode to group rows similar to Replicator. When Sneak Peek is enabled, Grids automatically toggle into stacked mode.



The Add Row button's label.



Enable row reordering. Default: true.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →