# Create Responsive Structured Dashboard Layouts Using the Grid Container and Grid Cell Components

> Applies to Versions: All current versions 1. Overview The Grid Container layout provides a powerful way to create structured, responsive dashboard layouts…

Source: https://www.fuuz.com/help/create-responsive-structured-dashboard-layouts-using-the-grid-container-and-grid-cell-comp
Last updated: 2026-06-16

How-To Guides · Screens, dashboards and reports


Last updated June 16, 2026, 1:10 PM UTC

## 1. Overview

The Grid Container layout provides a powerful way to create structured, responsive dashboard layouts in Fuuz. Unlike the default Flex layout which arranges items in rows or columns, the Grid layout allows you to define a precise two-dimensional matrix of cells where components can be positioned and sized exactly where you need them.

This article explains how to:

- Configure a Container to use Grid layout
- Define grid dimensions (rows and columns)
- Place components within the grid
- Use Grid Cells for components that span multiple rows or columns
- Create nested grids for complex layouts
- Make grid properties dynamic using JSONata transforms

> **Note:** **Demo Available:** A working Grid Container Demo screen is available for import (`Grid_Container_Demo_0_0_1.json`). Import this screen into your application to experiment with the grid properties interactively.

## 2. Key Concepts

### Grid vs. Flex Layout

| Aspect | Flex Layout | Grid Layout |
| --- | --- | --- |
| Dimension | One-dimensional (row OR column) | Two-dimensional (rows AND columns) |
| Item Placement | Items flow sequentially | Items placed in specific cells |
| Sizing | Items sized by content or flex-grow | Cells have uniform size, items can span |
| Best For | Toolbars, menus, form rows | Dashboards, tile layouts, data displays |

### Grid Terminology

- **Grid Container:** A Container component with `layout: "grid"` that defines the overall grid structure
- **Columns:** The number of vertical divisions in the grid
- **Rows:** The number of horizontal divisions in the grid
- **Grid Cell:** A special component that can span multiple columns and/or rows
- **Column Span (colSpan):** How many columns a Grid Cell occupies horizontally
- **Row Span (rowSpan):** How many rows a Grid Cell occupies vertically
- **Justify Items:** How items are aligned horizontally within their cells (start, center, end, stretch)

## 3. Creating a Grid Container

### Step 1: Add a Container Component

1. Open the Screen Designer
2. Drag a **Container** component from the component palette onto your screen
3. Select the Container to view its properties in the right panel

### Step 2: Set Layout to Grid

1. In the Container properties panel, locate the **Layout** property
2. Change the value from "flex" to **"grid"**
3. Additional grid-specific properties will appear

### Step 3: Configure Grid Dimensions

1. Set the **Columns** property to define how many columns the grid should have (e.g., 5)
2. Set the **Rows** property to define how many rows the grid should have (e.g., 5)
3. Optionally, set **Justify Items** to control horizontal alignment within cells

### Grid Container Properties Reference

| Property | Type | Description |
| --- | --- | --- |
| `layout` | String | Set to `"grid"` to enable grid layout |
| `columns` | Number | Number of columns in the grid (e.g., 5) |
| `rows` | Number | Number of rows in the grid (e.g., 5) |
| `justifyItems` | String | Horizontal alignment: "start", "center", "end", "stretch" |

## 4. Adding Items to the Grid

Items placed inside a Grid Container automatically flow into the grid cells from left to right, top to bottom. Each child component occupies one cell by default.

## 5. Using Grid Cells for Spanning

When you need a component to occupy more than one cell (span multiple columns or rows), use the **Grid Cell** component.

### Grid Cell Properties Reference

| Property | Type | Description |
| --- | --- | --- |
| `colSpan` | Number | Number of columns to span (default: 1) |
| `rowSpan` | Number | Number of rows to span (default: 1) |

## 6. Nested Grids

For complex layouts, you can nest grids inside each other. Place a Container with `layout: "grid"` inside a Grid Cell to create a sub-grid.

## 7. Dynamic Grid Properties

Grid properties can be made dynamic using JSONata transforms. This allows the grid structure to change based on user input, screen size, data conditions, or other factors.

## 8. Common Dashboard Patterns

- **KPI Dashboard (4x2):** 8 KPI tiles in 2 rows
- **Main + Detail Layout (3x2):** Large main chart with smaller detail widgets using GridCell colSpan/rowSpan
- **Workcenter Status Board (5x3):** One tile per workcenter for production floor display
- **Calendar Week View (7x5):** Days as columns, time slots as rows

## 9. Demo Screen Import

The Grid Container Demo (`Grid_Container_Demo_0_0_1.json`) provides an interactive example. Import via **Screen Designer → Import** . The demo includes form controls to dynamically adjust columns, rows, colSpan, and rowSpan in real-time.

> **Note:** The original KB article includes a downloadable attachment (`GridContainerDemo001.json`). Download it from the [original article](https://www.fuuz.com/help/create-responsive-structured-dashboard-layouts-using-the-grid-container-and-grid-cell-comp).

## 10. Best Practices

- **Plan your grid dimensions:** Sketch your layout first to determine optimal column and row counts
- **Use Grid Cells sparingly:** Only use Grid Cell components when you need spanning
- **Set fallback values:** When using dynamic properties, always provide `__fallbackValue`
- **Consider responsive design:** Use dynamic columns based on screen width
- **Leverage nested grids:** For complex layouts, nest grids rather than trying to achieve everything in one grid

## 11. Troubleshooting

| Issue | Possible Cause | Resolution |
| --- | --- | --- |
| Items stacking vertically | Layout not set to "grid" | Verify Container has `layout: "grid"` |
| Grid shows one column only | Columns property not set | Set columns to a positive integer (e.g., 5) |
| Grid Cell not spanning | Using Container instead of Grid Cell | Use the Grid Cell component for spanning |
| Dynamic values not working | Transform syntax error | Verify JSONata syntax and component references |

## 13. Revision History

| Version | Date | Editor | Description |
| --- | --- | --- | --- |
| 1.0 | 2025-01-25 | Fuuz Documentation Team | Initial release with Grid Container Demo v0.0.1 reference |

## See Also

- [Fuuz Form Detail Screen Specification](https://www.fuuz.com/community)
- [Master Data Table Screen Design Standard](https://www.fuuz.com/community)
- [Historical Data Table Screen Design Standard](https://www.fuuz.com/community)
- [Mobile Screen Design Standard](https://www.fuuz.com/community)

### Need more help?

Ask the Fuuz community, or open a ticket with Fuuz support.

[Ask the community](https://www.fuuz.com/community) [Open a ticket](https://support.fuuz.com/portal/en/newticket)

On this page

[1. Overview](#1-overview)

[2. Key Concepts](#2-key-concepts)

[3. Creating a Grid Container](#3-creating-a-grid-container)

[4. Adding Items to the Grid](#4-adding-items-to-the-grid)

[5. Using Grid Cells for Spanning](#5-using-grid-cells-for-spanning)

[6. Nested Grids](#6-nested-grids)

[7. Dynamic Grid Properties](#7-dynamic-grid-properties)

[8. Common Dashboard Patterns](#8-common-dashboard-patterns)

[9. Demo Screen Import](#9-demo-screen-import)

[10. Best Practices](#10-best-practices)

[11. Troubleshooting](#11-troubleshooting)

[13. Revision History](#13-revision-history)

[See Also](#see-also)