Help Center

How-To Guides · Screens, dashboards and reports

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

Last updated June 16, 2026, 1:10 PM UTC · fuuz.com/help/create-responsive-structured-dashboard-layouts-using-the-grid-container-and-grid-cell-comp

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

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

Step 2: Set Layout to Grid

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

Step 3: Configure Grid Dimensions

Set the Columns property to define how many columns the grid should have (e.g., 5)
Set the Rows property to define how many rows the grid should have (e.g., 5)
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.

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