Quick BI lets you lay out and organize elements, such as charts and controls, on a dashboard using the Page Grid Settings feature. This helps you position and size each component more precisely and flexibly. The result is a cleaner, more professional dashboard.
Function Overview
The Page Grid Settings feature controls the dashboard layout at the page level. It does not affect the internal styling of individual charts. Instead, it defines the underlying grid system for the entire dashboard page. By adjusting grid parameters, you can define the width, height, and spacing of each component with greater flexibility and precision.
Key Benefits
Fine-grained layout: Provides precise control over component position and size. You can align and arrange components down to the pixel.
Multiple components in one row: Ideal for when you need to place several components side by side in a single row, such as three KPI cards showing sales, profit margin, and cost, and keep them evenly spaced and aligned.
Improved efficiency: Predefined grid rules reduce the need for manual dragging and alignment. This speeds up the creation of dashboard layouts.
Scenarios
You want to display three key performance indicator (KPI) components horizontally across the top area of a dashboard with equal width and uniform spacing. Increasing the number of grid columns makes this layout easier to achieve.
You need to pack multiple small charts tightly into a limited space. Reducing the component unit height and column spacing creates a denser layout.
Limits
To use Page Grid Settings effectively, be aware of the following limitations:
Global setting: Page Grid Settings apply to the entire dashboard page. Once adjusted, the defined number of columns, unit height, and spacing affect the layout grid for all components on that dashboard. You cannot assign different grid settings to different areas of the page.
Changes the layout foundation: These settings change the smallest unit for resizing and repositioning components, not the exact size of each component. You still adjust the final dimensions of components by dragging their edges. However, the precision of these adjustments depends on your grid settings.
Procedure
You can find and configure Page Grid Settings in the toolbar of the dashboard editor.
Access the feature: In dashboard edit mode, go to the toolbar at the top. Click the Page Grid Settings icon (
) to open the configuration panel.
Configure settings: In the pop-up Page Grid Settings toolbar, adjust the following parameters.
Number of grid columns
Purpose: Sets the number of equal-width columns that the dashboard page is divided into horizontally.
Effect: A higher column count results in narrower columns. This gives you finer granularity when you drag to adjust the width of a component. It also makes it easier to fit and precisely align multiple components in one row.
Column spacing
Purpose: Sets the blank space between adjacent grid columns.
Effect: Adjusting this value changes the horizontal gap between side-by-side components.
Component unit height
Purpose: Defines the smallest increment (step size) for adjusting component height in the grid layout. This is measured in pixels (px).
Effect: A smaller unit height gives you finer granularity when you drag vertically to adjust the height of a component. This enables more precise height control.
Row spacing
Purpose: Sets the fixed vertical gap between adjacent components, or rows of components, and between components and the dashboard border.
Effect: Adjusting this value changes the vertical gap between stacked components. It affects the overall vertical density of the page.
Save your settings: After you finish configuring, click Save. You can then drag the edges of components on the dashboard canvas to resize them according to the new grid settings.
FAQ
1. I want more precise control over component height. Which setting should I change?
Answer: Adjust the Component unit height. Set it to a smaller value, such as 5 px instead of the default 10 px. Each time you drag the bottom edge of a component, its height will change in smaller steps. This gives you finer height control.
2. Do Page Grid Settings apply only to newly added components—or to the whole dashboard?
Answer: Page Grid Settings are global. They affect the layout grid for the entire dashboard page. Once changed, they apply to all existing and future components on that dashboard, including how precisely you can adjust their width, height, and spacing.
3. What does changing the “Number of grid columns” do? Is more always better?
Answer: The number of grid columns controls how precisely you can adjust component width. More columns allow you to make components narrower and fit more components in one row while keeping their relative widths under tight control. However, more is not always better. Too many columns can make dragging adjustments overly sensitive. Choose the column count that best fits your layout needs.