---
title: "Customise a Game Grid"
slug: "customise-a-game-grid"
updated: 2026-10-22T13:02:29Z
published: 2026-10-22T13:02:29Z
canonical: "docs.xtremepush.com/customise-a-game-grid"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customise a Game Grid

Customise the size and dimensions of a game grid using the Editor

This use case explains how to edit the dimensions and size of the game grid for tile-based games like *Scratchcard*, *Thunderboard*, and *Progressive Thunderboard*.

Using the game **Editor,** this example demonstrates how to change a *5x5* grid to a *4x4* grid by using the **Component Creator** and **Grid Arranger**. This example uses a *Progressive Thunderboard* game as the base as shown in the image below::

![Editing a grid in a Progressive Thunderboard game](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/c8f08af988f8249addcbb0552d3d86f91cf717e3c7199812705341d02f00ded8-Screenshot_2025-09-24_at_11.45.23(3).png?sv=2026-02-06&spr=https&st=2026-11-11T14%3A58%3A54Z&se=2026-11-11T15%3A58%3A54Z&sr=c&sp=r&sig=0IaSrpdjkK121MHb%2Ba%2BVSpXSr4YcC0%2BUsDSp8iFA1Tc%3D)

Grid in a Progressive Thunderboard game

## Resize and Rearrange the Game Grid

First, open the Editor in your game campaign. From the **Layout** drop-down at the top of the editor, select **Board** and do the following:

1. Reduce the total number of tiles in the game from 25 (5x5) to 16 (4x4) as shown in the image below:

![Reduce the number of tiles in the game grid](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/1f8b5679bbc962d3d9e5f37dc6d239bb3bd007fa33eb5892cd7096f47534dbc4-Screenshot_2025-09-24_at_14.00.47(2).png?sv=2026-02-06&spr=https&st=2026-11-11T14%3A58%3A54Z&se=2026-11-11T15%3A58%3A54Z&sr=c&sp=r&sig=0IaSrpdjkK121MHb%2Ba%2BVSpXSr4YcC0%2BUsDSp8iFA1Tc%3D)

Reduce the number of tiles in the game grid
  1. In the **Layers** tab on the right, select **Component Creator**.
  2. In the property panel on the left, find the **Amount** field and enter `16`.
  3. Click **Execute**.
2. Rearrange the 16 tiles into a 4x4 grid as shown in the image below:

![Rearrange the tile into a 4x4 grid](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/4f859eaae041f56cb7ae079fd61b775ab633268f50d283d81cd2f6568346b4c5-Screenshot_2025-09-24_at_14.06.32(2).png?sv=2026-02-06&spr=https&st=2026-11-11T14%3A58%3A54Z&se=2026-11-11T15%3A58%3A54Z&sr=c&sp=r&sig=0IaSrpdjkK121MHb%2Ba%2BVSpXSr4YcC0%2BUsDSp8iFA1Tc%3D)

Rearrange the tile into a 4x4 grid
  1. In the **Layers** tab on the right, select **Grid Arranger**
  2. In the property pane on the left, set **Rows** to `4 `and **Columns** to `4`.
  3. Click **Execute**.
3. Resize the grid to fit in the grid container
  1. In the **Layout** drop-down, select the **Main Screen Layout** again
  2. Select the **Tiles** layer as shown in the image below:

You may need to remove some items from the layer view to get a clear view of the updated grid.

![](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/d67054107372447763aef313ce406516d1357dbeec35f4254417bf62cc729a74-Screenshot_2025-09-24_at_14.11.10(2).png?sv=2026-02-06&spr=https&st=2026-11-11T14%3A58%3A54Z&se=2026-11-11T15%3A58%3A54Z&sr=c&sp=r&sig=0IaSrpdjkK121MHb%2Ba%2BVSpXSr4YcC0%2BUsDSp8iFA1Tc%3D)
  3. Click and drag a corner of the selection box to resize the grid to your desired dimensions.
4. Save your changes in the Editor.