---
title: "Create a Widget Grid"
slug: "create-a-widget-grid-12-1"
updated: 2026-03-19T14:21:44Z
published: 2026-03-19T14:21:44Z
canonical: "docs.bazefield.com/create-a-widget-grid-12-1"
---

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

# Create a Widget Grid

The **Dashboard Layout** allows users to organize widgets within rows and cells, providing a fully customizable structure for data visualization and analysis. The following actions can be performed directly within the layout editor:

![](https://cdn.document360.io/a0786c0f-b171-4b24-8860-c32eb7ef2738/Images/Documentation/image-694WG2VJ.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A57%3A55Z&se=2026-11-06T21%3A57%3A55Z&sr=c&sp=r&sig=wFC7mQtFgCyYggBVoY5IG4%2FKy53WFtjPZa3nBkNPHdQ%3D)

### **1. Adding a Row**

To create a new section in your dashboard:

- Click the ![](https://cdn.document360.io/a0786c0f-b171-4b24-8860-c32eb7ef2738/Images/Documentation/image-YNKSVUOH.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A57%3A55Z&se=2026-11-06T21%3A57%3A55Z&sr=c&sp=r&sig=wFC7mQtFgCyYggBVoY5IG4%2FKy53WFtjPZa3nBkNPHdQ%3D) button located at the bottom of the layout.
- A new empty row will be added, ready for widget insertion. This helps you structure your dashboard into logical groups of visualizations.

---

### **2. Adding a Widget**

Within any cell, click the ![](https://cdn.document360.io/a0786c0f-b171-4b24-8860-c32eb7ef2738/Images/Documentation/image-V5KHTCXZ.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A57%3A55Z&se=2026-11-06T21%3A57%3A55Z&sr=c&sp=r&sig=wFC7mQtFgCyYggBVoY5IG4%2FKy53WFtjPZa3nBkNPHdQ%3D) icon to **add a new widget**. This opens the widget creation panel, where you can:

- Select the widget type (e.g., chart, table, KPI, etc.)
- Configure its data source and appearance.

Each widget is placed inside a **column**, which can be resized or split to adjust the layout.

---

### **3. Splitting a Column in Two**

To divide a column into two equal parts:

- Use the ![](https://cdn.document360.io/a0786c0f-b171-4b24-8860-c32eb7ef2738/Images/Documentation/image-8W562I29.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A57%3A55Z&se=2026-11-06T21%3A57%3A55Z&sr=c&sp=r&sig=wFC7mQtFgCyYggBVoY5IG4%2FKy53WFtjPZa3nBkNPHdQ%3D) icon. This is useful for displaying multiple widgets within the same row.

---

### **4. Extending a Column**

You can adjust the width of a column by extending it:

- **Extend to the left:** Click the ![](https://cdn.document360.io/a0786c0f-b171-4b24-8860-c32eb7ef2738/Images/Documentation/image-B8T3OIRQ.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A57%3A55Z&se=2026-11-06T21%3A57%3A55Z&sr=c&sp=r&sig=wFC7mQtFgCyYggBVoY5IG4%2FKy53WFtjPZa3nBkNPHdQ%3D) icon to increase the column width, reducing the width of the column to its left.
- **Extend to the right:** Click the ![](https://cdn.document360.io/a0786c0f-b171-4b24-8860-c32eb7ef2738/Images/Documentation/image-ZW53DHFB.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A57%3A55Z&se=2026-11-06T21%3A57%3A55Z&sr=c&sp=r&sig=wFC7mQtFgCyYggBVoY5IG4%2FKy53WFtjPZa3nBkNPHdQ%3D) icon to increase the column width, reducing the width of the column to its right.

This gives you flexibility to resize and align your widgets according to your layout needs.

---

### **5. Deleting a Column**

If you need to remove a widget and its container:

- Click the ![](https://cdn.document360.io/a0786c0f-b171-4b24-8860-c32eb7ef2738/Images/Documentation/image-WQWY0JUP.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A57%3A55Z&se=2026-11-06T21%3A57%3A55Z&sr=c&sp=r&sig=wFC7mQtFgCyYggBVoY5IG4%2FKy53WFtjPZa3nBkNPHdQ%3D) **icon** to **delete the column**. Use this option with care, as it will remove both the column and the widgets it contains.

---

### **6. Inserting a Cloned Widget**

To reuse a widget configuration:

- Click the ![](https://cdn.document360.io/a0786c0f-b171-4b24-8860-c32eb7ef2738/Images/Documentation/image-I5URJCSS.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A57%3A55Z&se=2026-11-06T21%3A57%3A55Z&sr=c&sp=r&sig=wFC7mQtFgCyYggBVoY5IG4%2FKy53WFtjPZa3nBkNPHdQ%3D) **icon** to **insert a cloned widget**. This creates a copy of the original widget, keeping its settings and data configuration. It’s particularly useful for creating similar visualizations with slight variations.

---

### **7. Example Layout**

In the example shown above:

- Multiple KPI widgets are arranged in separate cells.
- Each row can be customized by adding, resizing, cloning, or deleting widgets. This modular design enables users to build complex, data-rich dashboards efficiently.