# Quick Layout-Grid Board Layout

✨Entrance 1 of Template Content Creation：Gameplay Template>>>Quick layout

✨Entrance 2 of Template Content Creation：Simply click on the "Quick layout" icon next to the canvas.

<figure><img src="/files/g31yggv6bJdUipPlqSBk" alt=""><figcaption></figcaption></figure>

Related case tutorial can refer to [Grid Board Layout - Template Content Creation](/playturbo-case-study/playable-content-editor/elimination-and-match-gameplay-cases/grid-board-layout-template-content-creation.md)

####

## 📒<mark style="color:blue;">Grid Board Layout Intro</mark>

* Grid Board Layout is currently only supported in the **"Content Creation"** mode and is not available for "Blank Canvas."
* By adjusting parameters such as grid layout, grid background, element style, and element layout in the Grid Board Layout, you can create Grid Board Layouts of different difficulties and styles to fulfill your creative material output.
* <mark style="color:red;">Tips: In the "Playable Templates" interface, click "Quick layout" to quickly filter templates that support</mark> <mark style="color:red;"></mark><mark style="color:red;">**Quick layout**</mark> <mark style="color:red;"></mark><mark style="color:red;">functionality!</mark>

<figure><img src="/files/xn1PgAwZcKpp7RDSTkcY" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/FPcemcnMSO3vUI03pXVh" alt=""><figcaption></figcaption></figure>

####

## <mark style="color:blue;">📒Grid Board Layout Sample Cases</mark>

"Grid Board Layout" is suitable for gameplay that involves adjusting element layouts within a fixed area. Currently, it is used only in some elimination, puzzle, and coloring templates.

* Sample1 -[ ](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001334%252F13061%252Fpv%252F24%252F06%252F25%252F667a8605dff15%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%81%9C%E8%BD%A6%E8%A7%A3%E8%B0%9Cv1\&language=undefined)[Pixel color](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001714%252F13683%252Fpv%252F24%252F11%252F13%252F673418092a4d1%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%83%8F%E7%B4%A0%E6%A0%BC%E4%B8%8A%E8%89%B2\&language=undefined)
* Sample2 -[ ](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001334%252F13061%252Fpv%252F24%252F06%252F25%252F667a8605dff15%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%81%9C%E8%BD%A6%E8%A7%A3%E8%B0%9Cv1\&language=undefined)[Shoot to Break Bricks](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001087%252F12515%252Fpv%252F24%252F02%252F20%252F65d41ddf53414%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%B0%84%E7%90%83%E6%B6%88%E9%99%A4%E7%A0%96%E5%9D%97\&language=undefined)
* Sample3 - [Match & Rescue](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20000872%252F11985%252Fpv%252F24%252F02%252F20%252F65d41d1aeed5b%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%82%B9%E6%B6%88%E8%A7%A3%E5%9B%B4\&language=undefined)
* Sample4 - [Square puzzle](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20000495%252F10920%252Fpv%252F24%252F02%252F20%252F65d41b66b7185%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E6%96%B9%E5%BD%A2%E6%8B%BC%E5%9B%BE\&language=undefined)

####

## 📒<mark style="color:blue;">Grid Board Layout Instruction</mark>

The parameters that can be adjusted in the "Grid Board Layout" feature are divided into two sections: "Grid," and "Element."  These settings need to be configured sequentially.&#x20;

Next, we will use the example of the template ["Match & Rescue" ](https://tinyurl.com/25ycjwpm)to provide a detailed explanation of how to use the "Grid Board Layout" feature.

### 1.Grid

#### **1）Enter the "Grid Board Layout"**

<figure><img src="/files/kzLIPAj7NvyGAz69lYsJ" alt=""><figcaption></figcaption></figure>

#### 2）**Edit Grid**

* **Number of rows and columns:**  Enter a number or click the small arrow icon to adjust the number of rows and columns on the Grid Board
* **Arrangement:** You can choose between Alignment or Column Misalignment

<div align="left"><figure><img src="/files/dOLGLtX8N3egmZVNxPwW" alt=""><figcaption></figcaption></figure></div>

* **Square BG:** You can choose to turn on/off the Square BG
* Replace the Square BG and apply it to all activated grids (default background is square, excess parts are automatically cropped)

<div align="left"><figure><img src="/files/WhqzcoW4oNHa8JMNUEMT" alt=""><figcaption></figcaption></figure></div>

* **Select/Eraser:** You can select/erase the desired grid by clicking or dragging.
* **Select All/Clear/Reset:** Click the corresponding button for quick operation.
* Note: After redesigning the Grid, please be sure to enter the Element interface for layout design.

<div align="left"><figure><img src="/files/hm0lQGL5ZhHdhYqgcvXe" alt=""><figcaption></figcaption></figure></div>

### 2.**Element**

After setting the "Grid," click on "Element" to configure the style and layout of the elements.

* **Element selection:** Open the element button to add elements to the grid; If the button is closed, it cannot be added.&#x20;
* Support for replacing element images.
* The default maximum number of element slots is 5.&#x20;

<div align="left"><figure><img src="/files/le9H56FlaydAD5Ua7pMn" alt=""><figcaption></figcaption></figure></div>

* **Arrange by weight：**&#x59;ou can choose to enable or disable it.&#x20;
* When enabled, you need to input the corresponding weight value for each element. <mark style="color:red;">Note: The total weight must equal 100% for it to apply.</mark>&#x20;
* After settings are made, click **"Apply to Grid Board."** The elements will be randomly placed within the enabled grids according to the specified weights.&#x20;
* Multiple clicks on"Apply to Grid Board" can generate different random layouts.&#x20;

<div align="left"><figure><img src="/files/5t3nT8JOvdttYORfyNGu" alt=""><figcaption></figcaption></figure></div>

If you wish to manually arrange the elements, you can use the shortcut buttons above for the respective operations.&#x20;

* **Select/Eraser:** You can fill/erase corresponding elements by clicking or dragging
* **Clear:** Click the clear button to clear all elements in the current grid

<div align="left"><figure><img src="/files/JYZvbq7E66zoSlN5xTyb" alt=""><figcaption></figcaption></figure></div>

After configuring the "Grid"and"Element,"  **please make sure to click "Confirm" for the Grid Board Layout to take effect.**

⚠️<mark style="color:red;">Please note: To adjust the Grid Board Layout, at least one \[element] must be added for the grid and template to function properly. Otherwise, the playable may not work correctly!</mark>

<figure><img src="/files/QwdMOECcR2PqAESMqEtk" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: 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:

```
GET https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/component-and-quick-layout/quick-layout-grid-board-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.