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

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

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

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

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

13. Revision History

See Also

• Fuuz Form Detail Screen Specification
• Master Data Table Screen Design Standard
• Historical Data Table Screen Design Standard
• Mobile Screen Design Standard